Merge pull request #5307 from Sandeep-FED/update-modern-carousel

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

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

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

@@ -10,9 +10,9 @@
     "nodeVersion": "18.18.2",
     "sdksVersions": {
       "@microsoft/microsoft-graph-client": "3.0.2",
-      "@microsoft/teams-js": "2.12.0"
+      "@microsoft/teams-js": "2.24.0"
     },
-    "version": "1.18.2",
+    "version": "1.20.0",
     "libraryName": "award-recognition",
     "libraryId": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
     "environment": "spo",

samples/react-modern-carousel/README.md

@@ -8,22 +8,22 @@ This SharePoint Framework (SPFx) web part introduces a contemporary carousel com
 
 ## Compatibility
 
-| :warning: Important          |
+| :warning: Important                                                                                                                                                                                                                                                                                   |
-|:---------------------------|
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to 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.|
+| Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to 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.   |
+| Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.                                                                                                                                                                                                                     |
 
 ## Used SharePoint Framework Version
 
-![version](https://img.shields.io/badge/version-1.18.2-green.svg)
+![version](https://img.shields.io/badge/version-1.20.0-green.svg)
 
 This sample is optimally compatible with the following environment configuration:
 
-![SPFx 1.18.2](https://img.shields.io/badge/SPFx-1.18.2-green.svg)
+![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)
 ![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")
+![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 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-red.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-red.svg)
@@ -39,17 +39,17 @@ This sample is optimally compatible with the following environment configuration
 
 Create a SharePoint custom list `Award Recognition` in the SPO site with below columns
 
-| Column Name  | Type |
+| Column Name | Type  |
-| ------- | --------------- |
+| ----------- | ----- |
-| Title | OOTB |
+| Title       | OOTB  |
-| Designation | Text |
+| Designation | Text  |
-| UserImage | Image |
+| UserImage   | Image |
 
 ## Solution
 
-| Solution    | Author(s)                                               |
+| Solution              | Author(s)                                                                                                                                                                                                                                                 |
-| ----------- | ------------------------------------------------------- |
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| react-modern-carousel| Sandeep P S ( [LinkedIn](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [LinkedIn](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) |
+| react-modern-carousel | Sandeep P S ( [LinkedIn](https://www.linkedin.com/in/sandeepps1299/) ) / Quadrasystems.net ( [Twitter](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) / [LinkedIn](https://www.linkedin.com/company/quadrasystems.net-india-pvt-ltd) ) |
 
 ## Contributors🧑‍💻
 
@@ -57,9 +57,10 @@ Create a SharePoint custom list `Award Recognition` in the SPO site with below c
 
 ## Version history
 
-| Version | Date             | Comments        |
+| Version | Date             | Comments                            |
-| ------- | ---------------- | --------------- |
+| ------- | ---------------- | ----------------------------------- |
-| 1.0     | March 16, 2024   | Initial release  |
+| 1.0     | March 16, 2024   | Initial release                     |
+| 1.1     | October 19, 2024 | Upgrade to SPFx 1.20 & misc changes |
 
 ## Minimal Path to Awesome⚡
 
@@ -97,7 +98,7 @@ Key features demonstrated by this solution:
 
 ## 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.
+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.
 
 If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
 

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-03-16",
+    "updateDateTime": "2024-10-10",
     "products": [
       "SharePoint"
     ],
@@ -21,7 +21,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.18.2"
+        "value": "1.20.2"
       }
     ],
     "thumbnails": [

samples/react-modern-carousel/config/package-solution.json

@@ -3,12 +3,12 @@
   "solution": {
     "name": "award-recognition-client-side-solution",
     "id": "45e061b8-13f5-423f-bedb-12fc2a44fa89",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
     "developer": {
-      "name": "",
+      "name": "Sandeep P S",
       "websiteUrl": "",
       "privacyUrl": "",
       "termsOfUseUrl": "",
@@ -30,7 +30,7 @@
         "title": "award-recognition Feature",
         "description": "The feature that activates elements of the award-recognition solution.",
         "id": "475edc5c-974e-43d2-874b-0262da790739",
-        "version": "1.0.0.0"
+        "version": "1.1.0.0"
       }
     ]
   },

samples/react-modern-carousel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "award-recognition",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "engines": {
     "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
@@ -13,14 +13,14 @@
   },
   "dependencies": {
     "@fluentui/react": "8.106.4",
-    "@fluentui/react-components": "^9.40.0",
+    "@fluentui/react-components": "^9.55.1",
     "@microsoft/sp-adaptive-card-extension-base": "1.18.2",
-    "@microsoft/sp-core-library": "1.18.2",
+    "@microsoft/sp-core-library": "1.20.0",
-    "@microsoft/sp-lodash-subset": "1.18.2",
+    "@microsoft/sp-lodash-subset": "1.20.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.18.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.20.0",
-    "@microsoft/sp-property-pane": "1.18.2",
+    "@microsoft/sp-property-pane": "1.20.0",
-    "@microsoft/sp-webpart-base": "1.18.2",
+    "@microsoft/sp-webpart-base": "1.20.0",
-    "@pnp/sp": "^3.20.0",
+    "@pnp/sp": "^3.26.0",
     "pnp-react-hooks": "^1.3.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
@@ -28,18 +28,17 @@
     "tslib": "2.3.1"
   },
   "devDependencies": {
-    "@microsoft/eslint-config-spfx": "1.18.2",
+    "@microsoft/eslint-config-spfx": "1.20.2",
     "@microsoft/eslint-plugin-spfx": "1.18.2",
-    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
     "@microsoft/rush-stack-compiler-4.7": "0.1.0",
     "@microsoft/sp-build-web": "1.18.2",
-    "@microsoft/sp-module-interfaces": "1.18.2",
+    "@microsoft/sp-module-interfaces": "1.20.2",
-    "@rushstack/eslint-config": "2.5.1",
+    "@rushstack/eslint-config": "4.0.1",
     "@types/react": "17.0.45",
     "@types/react-dom": "17.0.17",
     "@types/webpack-env": "~1.15.2",
     "ajv": "^6.12.5",
-    "eslint": "8.7.0",
+    "eslint": "8.57.0",
     "eslint-plugin-react-hooks": "4.3.0",
     "gulp": "4.0.2",
     "typescript": "4.7.4"

samples/react-modern-carousel/src/components/Carousel.tsx

@@ -1,54 +1,54 @@
 import * as React from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { EffectCoverflow } from "swiper";
-import { Card, CardPreview } from "@fluentui/react-components"
+import { Card, CardPreview } from "@fluentui/react-components";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
-import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems"
+import { useListItems } from "pnp-react-hooks/hooks/sp/useListItems";
-import { ListOptions } from "pnp-react-hooks/types/options/ListOptions"
+import { ListOptions } from "pnp-react-hooks/types/options/ListOptions";
-import { useSite } from "pnp-react-hooks/hooks/sp/useSite"
+import { useSite } from "pnp-react-hooks/hooks/sp/useSite";
 
 // Import Swiper styles
-import "swiper/swiper.min.css"
+import "swiper/swiper.min.css";
-import "swiper/modules/navigation/navigation.min.css"
+import "swiper/modules/navigation/navigation.min.css";
-import "swiper/modules/pagination/pagination.min.css"
+import "swiper/modules/pagination/pagination.min.css";
-import "swiper/modules/effect-coverflow/effect-coverflow.min.css"
+import "swiper/modules/effect-coverflow/effect-coverflow.min.css";
 
-import { AwardItems } from "../types/AwardItems"
+import { AwardItems } from "../types/AwardItems";
-import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss"
+import styles from "../webparts/awardRecognition/components/AwardRecognition.module.scss";
-import { Content } from "./Content"
+import { Content } from "./Content";
 
 export const Carousel = (): JSX.Element => {
-  const [awardList, setAwardList] = useState<AwardItems[]>([])
+  const [awardList, setAwardList] = useState<AwardItems[]>([]);
-  const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null)
+  const [selectedUser, setSelectedUser] = useState<AwardItems | null>(null);
 
   const listItems = useListItems<AwardItems>("Award Recognition", {
     query: {
       select: ["ID", "Title", "Designation", "UserImage"],
     },
     mode: ListOptions.All,
-  })
+  });
 
-  const siteInfo = useSite()
+  const siteInfo = useSite();
 
   useEffect(() => {
     if (listItems && listItems.length > 0) {
       const parsedData = listItems.map((item) => {
-        const AppImageUrl = JSON.parse(item.UserImage)
+        const AppImageUrl = JSON.parse(item.UserImage);
-        const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`
+        const ImageUrl = `${siteInfo.Url}/Lists/Award%20Recognition/Attachments/${item.ID}/${AppImageUrl.fileName}`;
-        return { ...item, ImageUrl }
+        return { ...item, ImageUrl };
-      })
+      });
-      setAwardList(parsedData)
+      setAwardList(parsedData);
       if (selectedUser === null) {
-        setSelectedUser(parsedData[0])
+        setSelectedUser(parsedData[0]);
       }
     }
-  }, [listItems, selectedUser, siteInfo])
+  }, [listItems, selectedUser, siteInfo]);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const handleSlideChange = (swiper: any): void => {
-    const activeIndex = swiper.activeIndex
+    const activeIndex = swiper.activeIndex;
-    setSelectedUser(awardList[activeIndex])
+    setSelectedUser(awardList[activeIndex]);
-  }
+  };
 
   return (
     <div className={styles.container}>
@@ -56,8 +56,10 @@ export const Carousel = (): JSX.Element => {
         <Content user={selectedUser} />
       </aside>
       <aside className={styles.carouselWrapper}>
+        <div className={styles.fade_left}></div>
+        <div className={styles.fade_right}></div>
         <Swiper
-          effect='coverflow'
+          effect="coverflow"
           grabCursor={true}
           coverflowEffect={{
             rotate: 0,
@@ -93,8 +95,8 @@ export const Carousel = (): JSX.Element => {
                   borderRadius: "8px",
                 }}
               >
-                <CardPreview>
+                <CardPreview style={{ height: "inherit" }}>
-                  <img src={user.ImageUrl} alt={user.Title}/>
+                  <img src={user.ImageUrl} alt={user.Title} />
                 </CardPreview>
               </Card>
             </SwiperSlide>
@@ -102,5 +104,5 @@ export const Carousel = (): JSX.Element => {
         </Swiper>
       </aside>
     </div>
-  )
+  );
-}
+};

samples/react-modern-carousel/src/webparts/awardRecognition/components/AwardRecognition.module.scss

@@ -26,6 +26,7 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
 }
 .carouselWrapper {
   width: 70%;
+  position: relative;
 }
 .contentDescriptionWrapper {
   display: grid;
@@ -36,3 +37,26 @@ $primaryColor: "[theme: themePrimary, default: #0078d7]";
   display: grid;
   gap: 0.2rem;
 }
+img {
+  object-fit: cover;
+}
+
+// Fade
+.fade_left,
+.fade_right {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 4rem; /* Equivalent to w-16 in Tailwind */
+  z-index: 10;
+}
+
+.fade_left {
+  left: 0;
+  background: linear-gradient(to right, white, transparent);
+}
+
+.fade_right {
+  right: 0;
+  background: linear-gradient(to left, white, transparent);
+}

samples/react-modern-carousel/src/webparts/awardRecognition/loc/en-us.js

@@ -1,10 +1,10 @@
 define([], function () {
   return {
-    PropertyPaneDescription: "Description",
+    PropertyPaneDescription: "Configure this webpart",
-    BasicGroupName: "Configure this webpart",
+    BasicGroupName: "Basic Settings",
-    WebpartFieldLabel: "Webpart Title",
+    WebpartFieldLabel: "Header",
-    ContentTitleFieldLabel: "Content Title",
+    ContentTitleFieldLabel: "Sub heading",
-    ContentDescriptionFieldLabel: "Content Description",
+    ContentDescriptionFieldLabel: "Sub heading description",
     AppLocalEnvironmentSharePoint:
       "The app is running on your local environment as SharePoint web part",
     AppLocalEnvironmentTeams: