Merge branch 'main' of https://github.com/pnp/sp-dev-fx-webparts into arigunawan-react-associated-hub-links

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -145,6 +145,24 @@ body:
       - label: not applicable
       - label: other (enter in the "Additional environment details" area below)
 
+- type: input
+  id: installed-node
+  validations:
+    required: true
+  attributes:
+    label:  What version of Node.js is currently installed on your workstation?
+    description: |
+        Run `node -v` and paste the results. 
+
+- type: input
+  id: required-node
+  validations:
+    required: true
+  attributes:
+    label:  What version of Node.js is required by the sample?
+    description: |
+        You can find the compatible versions of React in the sample's `README.md`, in the **Compatibility** section.
+        
 - type: textarea
   id: spfxdoctor
   validations:
@@ -152,7 +170,7 @@ body:
   attributes:
     label: Paste the results of SPFx doctor
     description: |
-        Run `m365 spfx doctor` and paste the results. 
+        Run `m365 spfx doctor -o text` and paste the results. 
         
         Follow [the steps](https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples#run-spfx-doctor) listed in [troubleshooting issues with samples](https://github.com/pnp/sp-dev-fx-webparts/wiki/Troubleshooting-issues-with-samples)
 

.gitignore

@@ -52,3 +52,5 @@ samples/**/solution/
 samples/**/temp/
 samples/**/release/
 samples/**/node_modules
+samples/react-kiota-custom-api-client/TeamifiedApi/appsettings.Development.json
+samples/react-kiota-custom-api-client/teamified-client/package-lock.json

README.md

@@ -37,9 +37,9 @@ Please use following logic on submitting your questions or issues to right locat
 
 ## Additional resources
 
-* [Overview of the SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Overview of the SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [SharePoint Framework development tools and libraries](https://docs.microsoft.com/sharepoint/dev/spfx/tools-and-libraries)
+* [SharePoint Framework development tools and libraries](https://learn.microsoft.com/sharepoint/dev/spfx/tools-and-libraries)
-* [Getting Started](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Getting Started](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Using the samples
 

samples/.yo-rc.json

@@ -0,0 +1,8 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": true,
+    "isCreatingSolution": true,
+    "environment": "spo",
+    "whichFolder": "subdir"
+  }
+}

samples/aad-api-spo-cookie/README.md

@@ -31,8 +31,8 @@ Sample web part showing the list of latest orders retrieved from a custom API se
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/aad-api-spo-cookie/assets/sample.json

@@ -80,7 +80,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/ace-strategy-pattern/README.md

@@ -37,7 +37,7 @@ With a better isolation and testability of our actions.
 ## Applies to
 
 - [SharePoint Framework](https://aka.ms/spfx)
-- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Prerequisites
 
@@ -107,8 +107,8 @@ Hope You'll enjoy it.
 
 ## References
 
-- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Getting started with SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
-- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Building for Microsoft teams](https://learn.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview)
-- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Use Microsoft Graph in your solution](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
-- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Publish SharePoint Framework applications to the Marketplace](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development

samples/angular-aad-webapi/README.md

@@ -38,8 +38,8 @@ Sample SharePoint Framework client-side web part illustrating communication with
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-aad-webapi/assets/sample.json

@@ -43,7 +43,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-greeting/README.md

@@ -21,8 +21,8 @@ Final outcome:
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 
 ## Solution

samples/angular-greeting/assets/sample.json

@@ -49,7 +49,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-greeting/package.json

@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@microsoft/rush-stack-compiler-3.7": "0.2.3",
-    "@microsoft/sp-build-web": "1.15.2",
+    "@microsoft/sp-build-web": "1.12.1",
     "@microsoft/sp-module-interfaces": "1.12.1",
     "@microsoft/sp-tslint-rules": "1.12.1",
     "@microsoft/sp-webpart-workbench": "1.12.1",

samples/angular-migration/README.md

@@ -27,8 +27,8 @@ Application after migration:
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-migration/angular-todo-webpart/README.md

@@ -21,8 +21,8 @@ Sample SharePoint Framework client-side web part for managing tasks stored in a
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-migration/assets/sample.json

@@ -50,7 +50,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-msgraph/README-Localized/README-es-es.md

@@ -42,8 +42,8 @@ y luego mostrará todas las listas asociadas con el sitio seguidos de todos los
 
 ## Se aplica a
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Espacio empresarial de desarrollador de Office 365](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Espacio empresarial de desarrollador de Office 365](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solución
 

samples/angular-msgraph/README-Localized/README-fr-fr.md

@@ -42,8 +42,8 @@ puis affiche toutes les listes associées au site, suivies de tous les élément
 
 ## S’applique à
 
-* [Version préliminaire pour développeurs de SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Version préliminaire pour développeurs de SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Client de développeur Office 365](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Client de développeur Office 365](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-msgraph/README-Localized/README-ja-jp.md

@@ -1,4 +1,4 @@
----
+---
 page_type: sample
 products:
 - office-sp
@@ -42,8 +42,8 @@ extensions:
 
 ## 適用対象
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 Developer のテナント](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 Developer のテナント](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## 解決方法
 

samples/angular-msgraph/README-Localized/README-pt-br.md

@@ -42,8 +42,8 @@ e exibirá todas as listas associadas ao site seguido por todos os itens da list
 
 ## Aplicável a
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Locatário de desenvolvedor do Office 365](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Locatário de desenvolvedor do Office 365](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solução
 

samples/angular-msgraph/README-Localized/README-ru-ru.md

@@ -1,4 +1,4 @@
----
+---
 page_type: sample
 products:
 - office-sp
@@ -42,8 +42,8 @@ extensions:
 
 ## Область применения
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Клиент Office 365 для разработчиков](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Клиент Office 365 для разработчиков](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Решение
 

samples/angular-msgraph/README-Localized/README-zh-cn.md

@@ -42,8 +42,8 @@ extensions:
 
 ## 适用于
 
-* [SharePoint Framework 开发人员预览版](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework 开发人员预览版](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 开发人员租户](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 开发人员租户](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## 解决方案
 

samples/angular-msgraph/README.md

@@ -52,8 +52,8 @@ display all the lists associated with the site followed by all the items inside
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-msgraph/assets/sample.json

@@ -67,7 +67,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-multipage/README.md

@@ -39,8 +39,8 @@ This sample contains a poll web part allowing users to vote and view the results
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-multipage/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-ngofficeuifabric-file-upload/README.md

@@ -38,8 +38,8 @@ Edit web part properties to set Document library Name. Initially, It has been se
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-ngofficeuifabric-file-upload/assets/sample.json

@@ -57,7 +57,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-ngofficeuifabric-todo/README.md

@@ -32,8 +32,8 @@ You can find a video recording walk-through this sample from [SharePoint PnP You
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-ngofficeuifabric-todo/assets/sample.json

@@ -51,7 +51,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-search/README.md

@@ -46,8 +46,8 @@ The logic for querying the SharePoint Content Types in the properties of the web
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-search/assets/sample.json

@@ -43,7 +43,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular-todo/README.md

@@ -36,8 +36,8 @@ Sample Web Part illustrating using Angular with the SharePoint Framework.
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angular-todo/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angular2-prototype/README.md

@@ -44,8 +44,8 @@ Sample To Do Web Part built with Angular2. This sample illustrates how you can u
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Prerequisites
 

samples/angular2-prototype/assets/sample.json

@@ -43,7 +43,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angularelements-helloworld/README.md

@@ -34,8 +34,8 @@ Set of sample web parts illustrating how to use Angular Elements in the SharePoi
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angularelements-helloworld/assets/sample.json

@@ -51,7 +51,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angularelements-helloworld/package.json

@@ -34,9 +34,9 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.4.1",
+    "@microsoft/sp-build-web": "~1.15.2",
     "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "~1.4.1",
+    "@microsoft/sp-webpart-workbench": "~1.12.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
     "ajv": "~5.2.2",

samples/angularelements-html-templatefile/README.md

@@ -34,8 +34,8 @@ A sample web part illustrating how to use Angular Elements in the SharePoint Fra
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/angularelements-html-templatefile/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/angularelements-html-templatefile/package.json

@@ -34,9 +34,9 @@
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.15.2",
+    "@microsoft/sp-build-web": "~1.4.1",
     "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "~1.12.1",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/mocha": ">=2.2.33 <2.6.0",
     "ajv": "~5.2.2",

samples/bootstrap-slider/README.md

@@ -40,8 +40,8 @@ Sample bootstrap slider which pulls the slides from a list inside the SharePoint
 
 ## Applies to
 
-* [SharePoint Framework Developer GA](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer GA](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/bootstrap-slider/assets/sample.json

@@ -55,7 +55,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/handlebarsjs-webpack-loader/README.md

@@ -30,8 +30,8 @@ This sample demonstrate how to set up SPFx to use [Handlebars](http://handlebars
 
 ## Applies to
 
-* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/handlebarsjs-webpack-loader/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/handlebarsjs-webpack-loader/package.json

@@ -13,9 +13,9 @@
     "handlebars": "^4.7.7"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "~1.15.2",
+    "@microsoft/sp-build-web": "~1.4.1",
     "@microsoft/sp-module-interfaces": "~1.4.1",
-    "@microsoft/sp-webpart-workbench": "~1.12.1",
+    "@microsoft/sp-webpart-workbench": "~1.4.1",
     "@types/chai": "~4.1.2",
     "@types/es6-collections": "^0.5.31",
     "@types/mocha": "~2.2.48",

samples/jquery-cdn/README.md

@@ -38,8 +38,8 @@ This is a sample web Part that illustrates the use of jQuery and its plugins loa
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/jquery-cdn/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/jquery-photopile/README.md

@@ -42,8 +42,8 @@ simulates a pile of photos scattered about on a surface. Thumbnail clicks remove
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/jquery-photopile/assets/sample.json

@@ -67,7 +67,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-advanced-commenting/.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.9.1",
+  "name": "SPFx 1.15.0",
-	"image": "docker.io/m365pnp/spfx:1.9.1",
+  "image": "docker.io/m365pnp/spfx:1.15.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.
@@ -12,8 +12,7 @@
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [
     4321,
-		35729,
+    35729
-		5432
   ],
   "portsAttributes": {
     "4321": {
@@ -22,11 +21,12 @@
       "onAutoForward": "silent",
       "requireLocalPort": true
     },
-		"5432": {
+    // Not needed for SPFx>= 1.12.1
-			"protocol": "https",
+    // "5432": {
-			"label": "Workbench",
+    // 	"protocol": "https",
-			"onAutoForward": "silent"
+    // 	"label": "Workbench",
-		},
+    // 	"onAutoForward": "silent"
+    // },
     "35729": {
       "protocol": "https",
       "label": "LiveReload",

samples/js-advanced-commenting/.devcontainer/spfx-startup.sh

@@ -7,9 +7,11 @@ echo
 echo -e "\e[1;94mGenerating dev certificate\e[0m"
 gulp trust-dev-cert
 
+# Convert the generated PEM certificate to a  CER certificate
+openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer
 
-cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.cer
+# Copy the PEM ecrtificate for non-Windows hosts
-cp ~/.gcb-serve-data/gcb-serve.cer ./spfx-dev-cert.pem
+cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem
 
 ## add *.cer to .gitignore to prevent certificates from being saved in repo
 if ! grep -Fxq '*.cer' ./.gitignore

samples/js-advanced-commenting/.gitignore

@@ -12,6 +12,7 @@ lib
 solution
 temp
 *.sppkg
+release
 
 # Coverage directory used by tools like istanbul
 coverage
@@ -30,3 +31,5 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+.heft

samples/js-advanced-commenting/.npmignore

@@ -0,0 +1,18 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode
+
+src

samples/js-advanced-commenting/.yo-rc.json

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.9.1",
+    "version": "1.15.2",
     "libraryName": "modern-page-comments",
     "libraryId": "cfa8dbcf-b32d-4de0-a6ba-af486007c2f2",
     "packageManager": "npm",

samples/js-advanced-commenting/README.md

@@ -35,26 +35,30 @@
 
 9. **_Document Preview_** can be enabled or disabled for the office files and videos.
 
-
-## Preview
 ![Advanced-Comments-Box](./assets/Advanced-Comments-Box.gif)
 
 
 ## Compatibility
 
-![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg)
+This sample is optimally compatible with the following environment configuration:
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+
+![SPFx 1.15.2](https://img.shields.io/badge/SPFx-1.15.2-green.svg)
+![Node.js v16 | v14 | v12](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%20%7C%20v12-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")
-![Local Workbench Incompatible](https://img.shields.io/badge/Local%20Workbench-Incompatible-red.svg "Requires access to SharePoint content")
+![Local Workbench Unsupported](https://img.shields.io/badge/Local%20Workbench-Unsupported-red.svg "Local workbench is no longer available as of SPFx 1.13 and above")
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
+For more information about SPFx compatibility, please refer to <https://aka.ms/spfx-matrix>
+
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram)
 
 ## Prerequisites
  
@@ -71,6 +75,7 @@ SPFxPageComments | [Sudharsan K.](https://github.com/sudharsank) ([@sudharsank](
 Version|Date|Comments
 -------|----|--------
 1.0.0.0|Feb 05 2020|Initial release
+1.1.0.0|Oct 06, 2022|Upgraded to 1.15.2
 
 
 ## Minimal Path to Awesome
@@ -85,15 +90,18 @@ Version|Date|Comments
 >  This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
 
 ## Features
+
 - Used [SharePoint Framework Property Controls](https://sharepoint.github.io/sp-dev-fx-property-controls/) to create the property pane controls(Text, ListPicker, Toggle) with callout.
 - Used [PnP](https://pnp.github.io/pnpjs/) for communication with SharePoint.
 - Used [jquery-comments](https://viima.github.io/jquery-comments/) for comments control with some customization.
 - Used [Moment.js](https://momentjs.com/) for datetime formatting.
 
 #### Local Mode
+
 This solution doesn't work on local mode.
 
-#### SharePoint Mode
+#### SharePoint Mode4
+
 If you want to try on a real environment, open:
 [O365 Workbench](https://your-domain.sharepoint.com/_layouts/15/workbench.aspx)
 
@@ -101,7 +109,6 @@ If you want to try on a real environment, open:
 
 [![Building an enhanced commenting web part with SPFx](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=ndHMdfFscsk "Building an enhanced commenting web part with SPFx")
 
-
 ## Help
 
 We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.

samples/js-advanced-commenting/assets/sample.json

@@ -9,7 +9,7 @@
       "This component is developed for the advanced usage of commenting the page or article etc. Page Comments lists will be created to store the comments."
     ],
     "creationDateTime": "2020-02-05",
-    "updateDateTime": "2020-02-05",
+    "updateDateTime": "2022-10-06",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.9.1"
+        "value": "1.15.2"
       },
       {
         "key": "PNPCONTROLS",
@@ -54,7 +54,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-advanced-commenting/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

samples/js-advanced-commenting/config/deploy-azure-storage.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "modern-page-comments",
   "accessKey": "<!-- ACCESS KEY -->"

samples/js-advanced-commenting/config/package-solution.json

@@ -3,9 +3,35 @@
   "solution": {
     "name": "Advanced Comments Box",
     "id": "cfa8dbcf-b32d-4de0-a6ba-af486007c2f2",
-    "version": "1.1.0.2",
+    "version": "1.2.0.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "",
+      "mpnId": "Undefined-1.15.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "modern-page-comments description"
+      },
+      "longDescription": {
+        "default": "modern-page-comments description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "modern-page-comments Feature",
+        "description": "The feature that activates elements of the modern-page-comments solution.",
+        "id": "a12aae38-ac3f-48e9-892f-411d99d97d3c",
+        "version": "1.2.0.0"
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/advanced-comments-box.sppkg"

samples/js-advanced-commenting/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",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/js-advanced-commenting/gulpfile.js

@@ -3,5 +3,12 @@
 const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+var getTasks = build.rig.getTasks;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
 
+  result.set('serve', result.get('serve-deprecated'));
+
+  return result;
+};
 build.initialize(gulp);

samples/js-advanced-commenting/package.json

@@ -1,38 +1,41 @@
 {
   "name": "modern-page-comments",
-  "version": "0.0.1",
+  "version": "1.2.0",
   "private": true,
   "main": "lib/index.js",
-  "engines": {
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.9.1",
+    "@microsoft/sp-adaptive-card-extension-base": "1.15.2",
-    "@microsoft/sp-lodash-subset": "1.9.1",
+    "@microsoft/sp-core-library": "1.15.2",
-    "@microsoft/sp-office-ui-fabric-core": "1.9.1",
+    "@microsoft/sp-lodash-subset": "1.15.2",
-    "@microsoft/sp-webpart-base": "1.9.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.15.2",
+    "@microsoft/sp-property-pane": "1.15.2",
+    "@microsoft/sp-webpart-base": "1.15.2",
     "@pnp/sp": "^2.0.0",
     "@pnp/spfx-property-controls": "1.16.0",
-    "@types/es6-promise": "0.0.33",
     "@types/jquery": "^2.0.54",
-    "@types/webpack-env": "1.13.1",
     "jquery": "^3.5.0",
-    "moment": "^2.29.2"
+    "moment": "^2.29.2",
+    "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.15.2",
+    "@microsoft/eslint-config-spfx": "1.15.2",
-    "@microsoft/sp-tslint-rules": "1.9.1",
+    "@microsoft/eslint-plugin-spfx": "1.15.2",
-    "@microsoft/sp-module-interfaces": "1.9.1",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
     "@microsoft/rush-stack-compiler-2.9": "0.7.16",
-    "gulp": "~3.9.1",
+    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
-    "@types/chai": "3.4.34",
+    "@microsoft/sp-build-web": "1.15.2",
-    "@types/mocha": "2.2.38",
+    "@microsoft/sp-module-interfaces": "1.15.2",
-    "ajv": "~5.2.2"
+    "@rushstack/eslint-config": "2.5.1",
+    "@types/es6-promise": "0.0.33",
+    "@types/react": "^18.0.21",
+    "@types/webpack-env": "1.15.2",
+    "ajv": "6.12.5",
+    "eslint": "8.7.0",
+    "gulp": "4.0.2",
+    "typescript": "4.5.5"
   }
 }

samples/js-advanced-commenting/src/webparts/pageComments/PageCommentsWebPart.ts

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { Version } from '@microsoft/sp-core-library';
-import {
+
-  BaseClientSideWebPart,
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
 import { SPComponentLoader } from '@microsoft/sp-loader';
 import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
 import { PropertyFieldSliderWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldSliderWithCallout';
@@ -12,7 +8,8 @@ import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/
 import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
 import * as _ from "lodash";
 import * as moment from 'moment';
-
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp-property-pane";
 import styles from './PageCommentsWebPart.module.scss';
 import * as strings from 'PageCommentsWebPartStrings';
 

samples/js-advanced-commenting/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -11,6 +11,7 @@
     "experimentalDecorators": true,
     "skipLibCheck": true,
     "outDir": "lib",
+    "noImplicitAny": false,
     "inlineSources": false,
     "strictNullChecks": false,
     "noUnusedLocals": false,
@@ -19,20 +20,18 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
+      "webpack-env",
-      "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
-  "exclude": [
+  "exclude": []
-    "node_modules",
-    "lib"
-  ]
 }

samples/js-advanced-commenting/tslint.json

@@ -1,30 +0,0 @@
-{
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
-  "rules": {
-    "class-name": false,
-    "export-name": false,
-    "forin": false,
-    "label-position": false,
-    "member-access": true,
-    "no-arg": false,
-    "no-console": false,
-    "no-construct": false,
-    "no-duplicate-variable": true,
-    "no-eval": false,
-    "no-function-expression": true,
-    "no-internal-module": true,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-unnecessary-semicolons": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-with-statement": true,
-    "semicolon": true,
-    "trailing-comma": false,
-    "typedef": false,
-    "typedef-whitespace": false,
-    "use-named-parameter": true,
-    "variable-name": false,
-    "whitespace": false
-  }
-}

samples/js-display-list/README.md

@@ -33,8 +33,8 @@ This simplistic sample web part demonstrates the use of JavaScript in a SharePoi
 
 ## Applies to
 
-* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 
 ## Solution

samples/js-display-list/assets/sample.json

@@ -49,7 +49,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-dynamic-bundling-libraries/README.md

@@ -22,8 +22,8 @@ Post Button Click that imports jQuery and additional functionality:
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 
 ## Solution

samples/js-dynamic-bundling-libraries/assets/sample.json

@@ -56,7 +56,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-dynamic-bundling-libraries/package.json

@@ -21,9 +21,9 @@
     "jquery": "^3.3.1"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.7.0",
+    "@microsoft/sp-build-web": "1.15.2",
     "@microsoft/sp-module-interfaces": "1.7.0",
-    "@microsoft/sp-webpart-workbench": "1.7.0",
+    "@microsoft/sp-webpart-workbench": "1.12.1",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "ajv": "~5.2.2",

samples/js-employee-spotlight/README.md

@@ -51,8 +51,8 @@ Simple Web Part that demonstrates the use of SharePoint Framework for show casin
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
 ## Applies to
-* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 
 ## Solution

samples/js-employee-spotlight/assets/sample.json

@@ -49,7 +49,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-extend-gulp/README.md

@@ -45,8 +45,8 @@ Read the following documentation for detailed information on integrating gulp ta
 
 ## Applies to
 
-* [SharePoint Framework Developer Preview](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 First Release Tenants](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 First Release Tenants](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Pre-requisites
 

samples/js-extend-gulp/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-extend-webpack/README.md

@@ -22,7 +22,7 @@ This sample shows how to use the webpack [markdown-loader](https://www.npmjs.com
 
 Read the following documentation for detailed information on working with webpack loaders in SharePoint Framework:
 
-- [Extending webpack in the SharePoint Framework toolchain](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline)
+- [Extending webpack in the SharePoint Framework toolchain](https://learn.microsoft.com/sharepoint/dev/spfx/toolchain/extending-webpack-in-build-pipeline)
 
 ## Compatibility
 
@@ -38,8 +38,8 @@ Read the following documentation for detailed information on working with webpac
 
 ## Applies to
 
-* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 

samples/js-extend-webpack/assets/sample.json

@@ -50,7 +50,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-gitHubBadge/README.md

@@ -18,8 +18,8 @@ Displays information from GitHub for a specified user.
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 
 ## Prerequisites

samples/js-gitHubBadge/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-modern-calendar/README.md

@@ -35,7 +35,7 @@ This is a modern web part built using the [SharePoint Framework](https://dev.off
 ## Applies to
 
 * [SharePoint Framework](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 ## Prerequisites
  

samples/js-modern-calendar/assets/sample.json

@@ -69,7 +69,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-modern-calendar/package.json

@@ -17,10 +17,10 @@
   },
   "devDependencies": {
     "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-build-web": "1.15.2",
+    "@microsoft/sp-build-web": "1.11.0",
     "@microsoft/sp-module-interfaces": "1.11.0",
     "@microsoft/sp-tslint-rules": "1.11.0",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
     "@types/chai": ">=3.4.34 <3.6.0",
     "@types/es6-promise": "0.0.33",
     "@types/mocha": ">=2.2.33 <2.6.0",

samples/js-msgraph-thumbnail/README.md

@@ -1,7 +1,7 @@
 # Thumbnail/preview of pages and files in SharePoint
 
 ## Summary
-A web part showcasing how to call the [Microsoft Graph Thumbnails API](https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails) to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.
+A web part showcasing how to call the [Microsoft Graph Thumbnails API](https://learn.microsoft.com/graph/api/driveitem-list-thumbnails) to generate a preview image for files and pages in SharePoint. The sample illustrates how to craft the preview URL both from a search result as well as from a SharePoint item object.
 
 _Note that a preview for all file formats (eg. Excel) might not currently be available._
 
@@ -22,7 +22,7 @@ The goal of the sample is to illustrate a single call calling pattern for the th
 |site id | Site object id - GUID. |
 |list id | List object id - GUID. |
 |item id | ListItem object id or unique id - Integer/GUID. |
-|custom size | See [Requesting custom thumbnail sizes](https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0&tabs=http#requesting-custom-thumbnail-sizes) in the official Microsoft Graph documentation.
+|custom size | See [Requesting custom thumbnail sizes](https://learn.microsoft.com/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0&tabs=http#requesting-custom-thumbnail-sizes) in the official Microsoft Graph documentation.
 
 ## Compatibility
 
@@ -38,7 +38,7 @@ The goal of the sample is to illustrate a single call calling pattern for the th
 ## Applies to
 
 * [SharePoint Framework Release GA](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 ## Solution
 

samples/js-msgraph-thumbnail/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-msgraph-thumbnail/package.json

@@ -25,10 +25,10 @@
         "@types/webpack-env": "1.13.1"
     },
     "devDependencies": {
-        "@microsoft/sp-build-web": "1.15.2",
+        "@microsoft/sp-build-web": "1.10.0",
         "@microsoft/sp-tslint-rules": "1.10.0",
         "@microsoft/sp-module-interfaces": "1.10.0",
-        "@microsoft/sp-webpart-workbench": "1.12.1",
+        "@microsoft/sp-webpart-workbench": "1.10.0",
         "@microsoft/rush-stack-compiler-3.3": "0.3.5",
         "gulp": "~3.9.1",
         "@types/chai": "3.4.34",

samples/js-msgraph-thumbnail/src/webparts/thumbnail/ThumbnailWebPart.ts

@@ -30,7 +30,7 @@ export default class ThumbnailWebPart extends BaseClientSideWebPart<void> {
         });
 
         // Thumbnail URL docs
-        // https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails
+        // https://learn.microsoft.com/graph/api/driveitem-list-thumbnails
 
         // When using custom thumbnails:
         // The thumbnail returned may not exactly match the pixel dimensions that was requested,

samples/js-myflows/README.md

@@ -23,6 +23,8 @@
 
 ## Compatibility
 
+This sample is designed to be used in the following enviroments:
+
 ![SPFx 1.8.2](https://img.shields.io/badge/SPFx-1.8.2-green.svg) 
 ![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
@@ -32,11 +34,13 @@
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
+For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix
+
 ## Applies to
 
-* [SharePoint Online](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Online](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 * [Microsoft Teams](https://products.office.com/en-US/microsoft-teams/group-chat-software)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 
 ## Web Part Properties

samples/js-myflows/assets/sample.json

@@ -71,12 +71,12 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       },
       {
         "name": "Building Microsoft Teams Tabs using SharePoint Framework",
         "description": "Starting with SharePoint Framework v1.8, you can build tabs for Microsoft Teams with the SharePoint Framework tooling and use SharePoint as a host for your solutions. As part of the SharePoint Framework v1.10 you can also publish your solution as Microsoft Teams personal app.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/integrate-with-teams-introduction"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/integrate-with-teams-introduction"
       }
     ]
   }

samples/js-myflows/package.json

@@ -20,10 +20,10 @@
     "@types/es6-promise": "0.0.33"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.15.2",
+    "@microsoft/sp-build-web": "1.8.2",
     "@microsoft/sp-tslint-rules": "1.8.2",
     "@microsoft/sp-module-interfaces": "1.8.2",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
+    "@microsoft/sp-webpart-workbench": "1.8.2",
     "@microsoft/rush-stack-compiler-2.9": "0.7.7",
     "gulp": "~3.9.1",
     "@types/chai": "3.4.34",

samples/js-powerbi-embedded/assets/sample.json

@@ -43,7 +43,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-propertycontrols-svg/README.md

@@ -1,3 +1,4 @@
+
 # Dynamic Scalable Vector Graphics (SVG) image using properties
 
 ## Summary
@@ -9,6 +10,8 @@ An SPFx web part that displays a Scalable Vector Graphics (SVG) image using prop
 
 ## Compatibility
 
+This sample is designed to be used in the following enviroments:
+
 ![SPFx 1.13.0](https://img.shields.io/badge/SPFx-1.13.0-green.svg) 
 ![Node.js v6](https://img.shields.io/badge/Node.js-v14-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
@@ -18,6 +21,8 @@ An SPFx web part that displays a Scalable Vector Graphics (SVG) image using prop
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
+For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix
+
 ## Which PnP SPFx controls are being used in this sample?
 
 * [PropertyFieldSpinButton](https://github.com/pnp/sp-dev-fx-property-controls/wiki/PropertyFieldSpinButton)
@@ -25,7 +30,7 @@ An SPFx web part that displays a Scalable Vector Graphics (SVG) image using prop
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 * [sp-dev-fx-property-controls](https://github.com/pnp/sp-dev-fx-property-controls)
 * [PnP Man](https://github.com/thechriskent/PnPMan)
 

samples/js-propertycontrols-svg/assets/sample.json

@@ -54,7 +54,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-public-unjoined-teams/README.md

@@ -19,8 +19,8 @@ This web part lists all the public teams the current user is not yet a member of
 
 ## Applies to
 
-* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+* [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
 ## Prerequisites
 

samples/js-public-unjoined-teams/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }

samples/js-public-unjoined-teams/package.json

@@ -19,10 +19,10 @@
     "@types/es6-promise": "0.0.33"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.15.2",
+    "@microsoft/sp-build-web": "1.7.1-plusbeta",
     "@microsoft/sp-tslint-rules": "1.7.1-plusbeta",
     "@microsoft/sp-module-interfaces": "1.7.1-plusbeta",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
+    "@microsoft/sp-webpart-workbench": "1.7.1-plusbeta",
     "gulp": "~3.9.1",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",

samples/js-skype-status/README.md

@@ -39,8 +39,8 @@ See the demo:
 
 ## Applies to
 
-* [SharePoint Framework Developer](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [SharePoint Framework Developer](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
-* [Office 365 developer tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 ## Solution
 
@@ -87,7 +87,7 @@ After copying that sample to your local machine and running `npm install` to ins
 
 ### Deploying the application
 
-Start by running `gulp package-solution` and deploy the application to the app catalog. More information on how to do it [here](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)  
+Start by running `gulp package-solution` and deploy the application to the app catalog. More information on how to do it [here](https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)  
 **At the end select SkypePresence web part instead**  
 Don't forget to run `gulp serve --nobrowser` to start the debugging server.
 

samples/js-skype-status/assets/sample.json

@@ -44,7 +44,7 @@
       {
         "name": "Build your first SharePoint client-side web part",
         "description": "Client-side web parts are client-side components that run in the context of a SharePoint page. Client-side web parts can be deployed to SharePoint environments that support the SharePoint Framework. You can also use modern JavaScript web frameworks, tools, and libraries to build them.",
-        "url": "https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+        "url": "https://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
       }
     ]
   }