Upgrade modern carousel to SPFx 1.21.0

samples/react-modern-carousel/.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
-  "name": "SPFx 1.20.2",
-  "image": "docker.io/m365pnp/spfx:1.20.2",
+  "name": "SPFx 1.21.0",
+  "image": "docker.io/m365pnp/spfx:1.21.0",
   "customizations": {
     "vscode": {
       "extensions": [

samples/react-modern-carousel/.nvmrc

@@ -1 +1 @@
-v18.18.2
+v22.15.0

samples/react-modern-carousel/.yo-rc.json

@@ -7,12 +7,12 @@
     "componentName": "AwardRecognition",
     "plusBeta": false,
     "isCreatingSolution": true,
-    "nodeVersion": "18.18.2",
+    "nodeVersion": "22.15.0",
     "sdksVersions": {
       "@microsoft/microsoft-graph-client": "3.0.2",
       "@microsoft/teams-js": "2.24.0"
     },
-    "version": "1.20.0",
+    "version": "1.21.0",
     "libraryName": "award-recognition",
     "libraryId": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
     "environment": "spo",

samples/react-modern-carousel/README.md

@@ -5,6 +5,8 @@
 This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment.
 
 ![Award Recognition](./assets/AwardRecognition.png)
+![Award Recognition Property Pane Configuration](./assets/Property_pane_options.png)
+![Award Recognition Dark Theme Appearance](./assets/Dark_theme_appearance.png)
 
 ## Compatibility
 
@@ -15,12 +17,10 @@ This SharePoint Framework (SPFx) web part introduces a contemporary carousel com
 
 ## Used SharePoint Framework Version
 
-![version](https://img.shields.io/badge/version-1.20.0-green.svg)
-
 This sample is optimally compatible with the following environment configuration:
 
-![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
-![Node.js v18 | v16](https://img.shields.io/badge/Node.js-v18%20%7C%20v16-green.svg)
+![SPFx 1.21.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
+![Node.js v22](https://img.shields.io/badge/Node.js-v22-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")
@@ -56,6 +56,7 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
 | 1.0     | March 16, 2024   | Initial release                     |
 | 1.1     | October 19, 2024 | Upgrade to SPFx 1.20 & misc. changes |
 | 2.0     | November 1, 2024 | New feature: card styles & animations |
+| 2.1     | May 1, 2025 | Upgrade to SPFx 1.21 & code cleanup |
 
 ## Minimal Path to Awesome⚡
 
@@ -107,4 +108,4 @@ Finally, if you have an idea for improvement, [make a suggestion](https://github
 
 **THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
 
-![react-modern-carousel](https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-modern-carousel)
+<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-modern-carousel" />

samples/react-modern-carousel/assets/sample.json

@@ -10,7 +10,7 @@
       "This SharePoint Framework (SPFx) web part introduces a contemporary carousel component leveraging Swiper, facilitating seamless traversal through content housed within a SharePoint site. This innovative feature enhances user experience by providing fluid navigation through various pieces of content, thereby adding a touch of elegance and sophistication to the SharePoint environment."
     ],
     "creationDateTime": "2024-03-16",
-    "updateDateTime": "2024-11-01",
+    "updateDateTime": "2025-05-01",
     "products": [
       "SharePoint"
     ],
@@ -21,7 +21,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.20.2"
+        "value": "1.21.0"
       }
     ],
     "thumbnails": [

samples/react-modern-carousel/gulpfile.js

@@ -4,6 +4,51 @@ 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.`);
 
+// add these after const build = require('@microsoft/sp-build-web');
+const fs = require('fs');
+const path = require('path');
+
+// Insert this code before build.initialize(require('gulp'));
+const copyTask = build.subTask('copy-to-build', function (gulp, buildOptions, done) {
+  const srcFolder = './temp/build';
+  const destFolder = './temp/';
+  // Check if the destination folder exists, if not, create it
+  if (!fs.existsSync(destFolder)) {
+    fs.mkdirSync(destFolder, { recursive: true });
+}
+
+// Copy files from srcFolder to destFolder, excluding destFolder itself
+return gulp.src([path.join(srcFolder, '**/*'), '!' + destFolder])
+  .pipe(gulp.dest(destFolder));
+});
+
+build.rig.addPostBundleTask(copyTask);
+
+
+build.configureWebpack.mergeConfig({
+
+  additionalConfiguration: (generatedConfiguration) => {
+    // Modify CSS Modules loader configuration
+
+    if (generatedConfiguration.module && generatedConfiguration.module.rules) {
+      for (const rule of generatedConfiguration.module.rules) {
+        if (rule.use && rule.use[0] && rule.use[0].loader.includes('css-loader') && rule.use[0].options.generateCssClassName) {
+          console.log('Rule Test:'+ rule.test);
+          console.log('Rule Loader:'+ rule.use[0].loader);
+          console.log('Rule generateCssClassName:'+ rule.use[0].options.generateCssClassName);
+          rule.use[0].options.generateCssClassName = (existingClassName, cssFilename, cssContent)=>{
+            return `${existingClassName}`;
+        };
+
+        }
+      }
+    }
+
+    return generatedConfiguration;
+  }
+
+});
+
 var getTasks = build.rig.getTasks;
 build.rig.getTasks = function () {
   var result = getTasks.call(build.rig);
@@ -14,3 +59,5 @@ build.rig.getTasks = function () {
 };
 
 build.initialize(require('gulp'));
+
+module.exports = build;