Upgrade react-accordion to SPFx 1.20 & fix related bugs

samples/react-accordion/.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 }
+};

samples/react-accordion/.gitignore

@@ -28,6 +28,9 @@ obj
 # Resx Generated Code
 *.resx.ts
 
+.heft
+.release
+
 # Styles Generated Code
 *.scss.ts
 # .CER Certificates

samples/react-accordion/.npmignore

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

samples/react-accordion/.yo-rc.json

@@ -1,9 +1,13 @@
 {
   "@microsoft/generator-sharepoint": {
+    "version": "1.20.0",
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.24.0"
+    },
+     "nodeVersion": "18.18.2",
     "isCreatingSolution": true,
     "isDomainIsolated": false,
     "environment": "spo",
-    "version": "1.10.0",
     "libraryName": "react-accordion",
     "libraryId": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
     "packageManager": "npm",

samples/react-accordion/README.md

@@ -29,8 +29,8 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
 | 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.10](https://img.shields.io/badge/SPFx-1.10.0-green.svg) 
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg) 
+![Node.js v16 | v18](https://img.shields.io/badge/Node.js-v16%20%7C%20v18-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")
@@ -47,6 +47,7 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
 
 * [Gautam Sheth](https://github.com/gautamdsheth)
 * Abhishek Garg
+* [Sandeep P S](https://github.com/Sandeep-FED)
 
 ## Version history
 
@@ -57,6 +58,7 @@ Version|Date|Comments
 2.1|June 22, 2020|Added pagination (Abhishek Garg)
 2.2|October 1, 2020 | Added new Pagination Configuration (@beau__cameron)
 2.3|September 30, 2021 | Added sorting (@fthorild)
+3.0|October 13, 2024 | Upgrade to SPFx 1.20.0 & includes bug fixes
 
 ## Minimal Path to Awesome
 

samples/react-accordion/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": "react-accordion",
   "accessKey": "<!-- ACCESS KEY -->"

samples/react-accordion/config/package-solution.json

@@ -3,9 +3,31 @@
   "solution": {
     "name": "react-accordion-client-side-solution",
     "id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
-    "version": "2.3.0.0",
+    "version": "3.0.0.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "metadata": {
+      "shortDescription": {
+        "default": "react-accordion description"
+      },
+      "longDescription": {
+        "default": "react-accordion description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+        {
+          "title": "react-accordion ReactAccordionWebPart Feature",
+          "description": "The feature that activates ReactAccordionWebPart from the react-accordion solution.",
+          "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
+          "version": "3.0.0.0",
+          "componentIds": [
+            "97a28c00-64ee-4ec7-b373-723e39069a96"
+          ]
+        }
+      ]
   },
   "paths": {
     "zippedPackage": "solution/react-accordion.sppkg"

samples/react-accordion/config/sass.json

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

samples/react-accordion/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://{tenantDomain}/_layouts/workbench.aspx"
 }

samples/react-accordion/gulpfile.js

@@ -4,4 +4,13 @@ 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);