Merge branch 'main' into fixup-in-react-followed-drag-and-drop-grid

pnp · Jan 13, 2025 · d2c8b16 · d2c8b16
2 parents 98fb173 + 374b313
commit d2c8b16
Show file tree

Hide file tree

Showing 125 changed files with 132,894 additions and 55,380 deletions.
diff --git a/.metadata/extension-samples.json b/.metadata/extension-samples.json
@@ -6916,7 +6916,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -6927,7 +6927,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
     "tags": [],

diff --git a/.metadata/samples.json b/.metadata/samples.json
@@ -6916,7 +6916,7 @@
       "This sample shows site mega menu. Application customizer is used along with SharePoint List to store the menu items."
     ],
     "creationDateTime": "2018-12-10",
-    "updateDateTime": "2018-12-10",
+    "updateDateTime": "2024-10-31",
     "products": [
       "SharePoint"
     ],
@@ -6927,7 +6927,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.7.0"
+        "value": "1.20.0"
       }
     ],
     "tags": [],
@@ -17168,7 +17168,7 @@
       "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date."
     ],
     "creationDateTime": "2021-09-17",
-    "updateDateTime": "2023-03-06",
+    "updateDateTime": "2025-01-10",
     "products": [
       "SharePoint"
     ],
@@ -17179,7 +17179,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.16.1"
+        "value": "1.20.0"
       },
       {
         "key": "PNPCONTROLS",
@@ -27685,6 +27685,83 @@
       }
     ]
   },
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-svg-to-json-converter",
+    "source": "pnp",
+    "title": "SVG to JSON Converter",
+    "shortDescription": "Allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting.",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-svg-to-json-converter",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-svg-to-json-converter",
+    "longDescription": [
+      "This web part allows users to read SVGs from a SharePoint library, select one of them and have the code converted into a JSON format that is ready to be used in a SharePoint List in advanced formatting. Users can both copy the JSON format to their clipboard (for further manipulation) or select a site, a list, and a column and then directly apply the format to this column."
+    ],
+    "creationDateTime": "2024-11-01",
+    "updateDateTime": "2024-11-01",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "name": "webpart-german.png",
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-german.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-sp.png",
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-sp.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-with-reset.png",
+        "type": "image",
+        "order": 102,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-with-reset.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart-with-site-selector.png",
+        "type": "image",
+        "order": 103,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart-with-site-selector.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "webpart.png",
+        "type": "image",
+        "order": 104,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-svg-to-json-converter/assets/webpart.png",
+        "alt": "Web Part Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "LuiseFreese",
+        "pictureUrl": "https://github.com/LuiseFreese.png",
+        "name": "Luise Freese"
+      }
+    ],
+    "references": [
+      {
+        "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://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  },
   {
     "name": "pnp-sp-dev-spfx-web-parts-react-tabacordion",
     "source": "pnp",
@@ -28897,6 +28974,65 @@
       }
     ]
   },
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-teams-tabs-graph",
+    "source": "pnp",
+    "title": "MS Teams Channels and Tabs from Modern Team site",
+    "shortDescription": "A SPFx Web Part using Graph api. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams.",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-teams-tabs-graph",
+    "longDescription": [
+      "A SPFx Web Part using @pnp/graph/teams. It shows Channels and Tabs (with link) from a Modern Team Site connected to Microsoft Teams."
+    ],
+    "creationDateTime": "2025-01-01",
+    "updateDateTime": "2025-01-01",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.20.0"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/raw/main/samples/react-teams-tabs-graph/assets/screenshots/react-teams-tabs-graph-webpart.png?raw=true",
+        "alt": "MS Teams Channels and Tabs from Modern Team site"
+      },
+      {
+        "type": "image",
+        "order": 101,
+        "url": "https://github.com/pnp/sp-dev-fx-webparts/blob/main/samples/react-teams-tabs-graph/assets/screenshots/react-teams-tabs-graph-webpart2.png?raw=true",
+        "alt": "MS Teams Channels and Tabs from Modern Team site"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "fredupstair",
+        "company": "Avanade Italy",
+        "pictureUrl": "https://github.com/fredupstair.png",
+        "name": "Federico Porceddu"
+      },
+      {
+        "gitHubAccount": "nicolaskheirallah",
+        "pictureUrl": "https://github.com/nicolaskheirallah.png",
+        "name": "Nicolas Kheirallah"
+      }
+    ],
+    "references": [
+      {
+        "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://learn.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part"
+      }
+    ]
+  },
   {
     "name": "pnp-sp-dev-spfx-web-parts-react-teams-tabs-pnpjs",
     "source": "pnp",

diff --git a/samples/react-graph-app-secret-expiration/.eslintignore.json b/samples/react-graph-app-secret-expiration/.eslintignore.json
@@ -0,0 +1 @@
+**/*.js
diff --git a/samples/react-graph-app-secret-expiration/.eslintrc.js b/samples/react-graph-app-secret-expiration/.eslintrc.js
@@ -22,42 +22,6 @@ require('@rushstack/eslint-config/patch/modern-module-resolution');
       '@typescript-eslint/adjacent-overload-signatures': 1,
       // STANDARDIZED BY:   @typescript-eslint\eslint-plugin\dist\configs\recommended.json
       //
-      // CONFIGURATION:     By default, these are banned: String, Boolean, Number, Object, Symbol
-      '@typescript-eslint/ban-types': [
-        1,
-        {
-          'extendDefaults': false,
-          'types': {
-            'String': {
-              'message': 'Use \'string\' instead',
-              'fixWith': 'string'
-            },
-            'Boolean': {
-              'message': 'Use \'boolean\' instead',
-              'fixWith': 'boolean'
-            },
-            'Number': {
-              'message': 'Use \'number\' instead',
-              'fixWith': 'number'
-            },
-            'Object': {
-              'message': 'Use \'object\' instead, or else define a proper TypeScript type:'
-            },
-            'Symbol': {
-              'message': 'Use \'symbol\' instead',
-              'fixWith': 'symbol'
-            },
-            'Function': {
-              'message': 'The \'Function\' type accepts any function-like value.'
-            }
-          }
-        }
-      ],
-      // RATIONALE:         Code is more readable when the type of every variable is immediately obvious.
-      //                    Even if the compiler may be able to infer a type, this inference will be unavailable
-      //                    to a person who is reviewing a GitHub diff.  This rule makes writing code harder,
-      //                    but writing code is a much less important activity than reading it.
-      //
       // STANDARDIZED BY:   @typescript-eslint\eslint-plugin\dist\configs\recommended.json
       '@typescript-eslint/explicit-function-return-type': [
         1,

diff --git a/samples/react-graph-app-secret-expiration/.nvmrc b/samples/react-graph-app-secret-expiration/.nvmrc
@@ -0,0 +1 @@
+v18.18.0
diff --git a/samples/react-graph-app-secret-expiration/.yo-rc.json b/samples/react-graph-app-secret-expiration/.yo-rc.json
@@ -2,11 +2,14 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.16.1",
+    "version": "1.20.0",
     "libraryName": "react-graph-app-secret-expiration",
     "libraryId": "b25d85a4-7310-408a-a263-25959b0a5b1b",
     "packageManager": "npm",
     "isDomainIsolated": false,
-    "componentType": "webpart"
+    "componentType": "webpart",
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.24.0"
+    }
   }
 }
diff --git a/samples/react-graph-app-secret-expiration/README.md b/samples/react-graph-app-secret-expiration/README.md
@@ -14,8 +14,8 @@ I got the idea from this great article [Use Power Automate to Notify of Upcoming
 | 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.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
-![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-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)
 ![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")
@@ -43,6 +43,7 @@ Version|Date|Comments
 1.3|March 14, 2022|Upgrade to SPFx v1.14.0
 1.4|July 07, 2022|Upgrade to SPFx v1.15.0
 1.5|March 06, 2023|Upgrade to SPFx v1.16.1
+1.6|December 09, 2024|Upgrade to SPFx v1.20.0
 
 
 ## Minimal path to awesome

diff --git a/.../react-graph-app-secret-expiration/assets/react-graph-app-secret-expiration.png b/.../react-graph-app-secret-expiration/assets/react-graph-app-secret-expiration.png
diff --git a/samples/react-graph-app-secret-expiration/assets/sample.json b/samples/react-graph-app-secret-expiration/assets/sample.json
@@ -9,7 +9,7 @@
             "This sample web part shows the list of your applications registered in Azure AD along with their associated client secret/certificate expiration date."
         ],
         "creationDateTime": "2021-09-17",
-        "updateDateTime": "2023-03-06",
+        "updateDateTime": "2025-01-10",
         "products": [
             "SharePoint"
         ],
@@ -20,7 +20,7 @@
             },
             {
                 "key": "SPFX-VERSION",
-                "value": "1.16.1"
+                "value": "1.20.0"
             },
             {
                 "key": "PNPCONTROLS",

diff --git a/samples/react-graph-app-secret-expiration/config/eslint.json b/samples/react-graph-app-secret-expiration/config/eslint.json
@@ -0,0 +1,18 @@
+{
+    "$schema": "https://json.schemastore.org/eslintrc.json",
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "ignorePatterns": "*.js"
+}
diff --git a/samples/react-graph-app-secret-expiration/config/package-solution.json b/samples/react-graph-app-secret-expiration/config/package-solution.json
@@ -17,12 +17,12 @@
         "title": "react-graph-app-secret-expiration Feature",
         "description": "The feature that activates elements of the react-graph-app-secret-expiration solution.",
         "id": "ca58f355-9872-4025-8ad5-763ad6076034",
-        "version": "1.5.0.0"
+        "version": "1.6.0.0"
       }
     ],
     "name": "react-graph-app-secret-expiration-client-side-solution",
     "id": "b25d85a4-7310-408a-a263-25959b0a5b1b",
-    "version": "1.5.0.0",
+    "version": "1.6.0.0",
     "includeClientSideAssets": true,
     "isDomainIsolated": false,
     "skipFeatureDeployment": true,

diff --git a/samples/react-graph-app-secret-expiration/config/serve.json b/samples/react-graph-app-secret-expiration/config/serve.json
@@ -2,5 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
 }
diff --git a/samples/react-graph-app-secret-expiration/gulpfile.js b/samples/react-graph-app-secret-expiration/gulpfile.js
@@ -1,5 +1,6 @@
 'use strict';
 
+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.`);
@@ -13,4 +14,4 @@ build.rig.getTasks = function () {
   return result;
 };
 
-build.initialize(require('gulp'));
+build.initialize(gulp);