Merge branch 'main' into main

Author: hugoabernier

.metadata/samples.json

@@ -11990,9 +11990,9 @@
     ],
     "thumbnails": [
       {
-        "type": "video",
+        "type": "image",
         "order": 100,
-        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/refs/heads/main/samples/react-calendar/assets/react-calendar-categories.mp4",
+        "url": "raw.githubusercontent.com/pnp/sp-dev-fx-webparts/refs/heads/main/samples/react-calendar/assets/react-calendar-categories.png",
         "alt": "Calendar"
       },
       {
@@ -13795,6 +13795,69 @@
       }
     ]
   },
+  {
+    "name": "pnp-sp-dev-spfx-web-parts-react-custom-localization",
+    "source": "pnp",
+    "title": "Custom Localization",
+    "shortDescription": "Shows how you can load localization files and use the localized strings if you have requirements to display localized text outside the normal SPFx/SPO processing",
+    "url": "https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custom-localization",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-custom-localization",
+    "longDescription": [
+      "Shows how you can load localization files and use the localized strings if you have requirements to display localized text outside the normal SPFx/SPO processing"
+    ],
+    "creationDateTime": "2025-01-24",
+    "updateDateTime": "2025-01-24",
+    "products": [
+      "SharePoint"
+    ],
+    "metadata": [
+      {
+        "key": "CLIENT-SIDE-DEV",
+        "value": "React"
+      },
+      {
+        "key": "SPFX-VERSION",
+        "value": "1.18.2"
+      }
+    ],
+    "thumbnails": [
+      {
+        "name": "default-behavior.png",
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-custom-localization/assets/default-behavior.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "page-translation-detection.png",
+        "type": "image",
+        "order": 101,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-custom-localization/assets/page-translation-detection.png",
+        "alt": "Web Part Preview"
+      },
+      {
+        "name": "specific-language.png",
+        "type": "image",
+        "order": 102,
+        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/main/samples/react-custom-localization/assets/specific-language.png",
+        "alt": "Web Part Preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "brianpmccullough",
+        "pictureUrl": "https://github.com/brianpmccullough.png",
+        "name": "Brian McCullough"
+      }
+    ],
+    "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-custompropertypanecontrols",
     "source": "pnp",
@@ -27567,7 +27630,7 @@
       "This web part demonstrates Star Ratings capabilities to SharePoint News. The Ratings site collection feature provides Likes and Star Ratings, but SharePoint News provides only provides Likes. This web part can get or set ratings of the current page."
     ],
     "creationDateTime": "2021-10-07",
-    "updateDateTime": "2023-11-09",
+    "updateDateTime": "2025-01-22",
     "products": [
       "SharePoint"
     ],
@@ -27578,7 +27641,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.18.0"
+        "value": "1.20.0"
       }
     ],
     "thumbnails": [

samples/react-calendar/README.md

@@ -10,7 +10,7 @@ Each category has its own color that is generated in the load.
 
 The Web Part checks the user's permissions for the View, Add, Edit, and Delete events.
 
-![calendar](assets/react-calendar-categories.mp4)
+![calendar](assets/react-calendar-categories.png)
 
 ![calendar](assets/animatevideo.gif)
 

samples/react-calendar/assets/react-calendar-categories.png

@@ -31,9 +31,9 @@
     ],
     "thumbnails": [
       {
-        "type": "video",
+        "type": "image",
         "order": 100,
-        "url": "https://raw.githubusercontent.com/pnp/sp-dev-fx-webparts/refs/heads/main/samples/react-calendar/assets/react-calendar-categories.mp4",
+        "url": "raw.githubusercontent.com/pnp/sp-dev-fx-webparts/refs/heads/main/samples/react-calendar/assets/react-calendar-categories.png",
         "alt": "Calendar"
       },
       {

samples/react-calendar/assets/sample.json

@@ -816,49 +816,56 @@ export class Event extends React.Component<IEventProps, IEventState> {
    * @memberof Event 
    */
   private async returnExceptionRecurrenceInfo(recurrenceData: string) {
-    const parser = new XMLParser();
+    // Configure the XML parser
+    const parser = new XMLParser({
+      ignoreAttributes: false, // Include attributes in the parsed JSON
+      attributeNamePrefix: "", // Do not prefix attributes with @
+      isArray: (name) => ["rule", "repeat", "daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"].includes(name), // Explicitly set nodes to be arrays
+    });
+  
     try {
-      // Parse the XML string into a JSON object
-      const promise = parser.parse(recurrenceData);
-
-      const recurrenceInfo: any = await promise;
-      if (recurrenceInfo != null) {
-        let keys = Object.keys(recurrenceInfo.recurrence.rule[0].repeat[0]);
+      // Parse the XML string
+      const recurrenceInfo: any = parser.parse(recurrenceData);
+  
+      // Check if parsed data contains expected structure
+      if (recurrenceInfo?.recurrence?.rule?.[0]?.repeat?.[0]) {
+        // Access repeat keys
+        const repeat = recurrenceInfo.recurrence.rule[0].repeat[0];
+        const keys = Object.keys(repeat);
+  
+        // Supported recurrence types
         const recurrenceTypes = ["daily", "weekly", "monthly", "monthlyByDay", "yearly", "yearlyByDay"];
-        for (var key of keys) {
-          const rule = recurrenceInfo.recurrence.rule[0].repeat[0][key][0]['$'];
+  
+        for (const key of keys) {
+          const rule = repeat[key]?.[0]?.["$"];
+          if (!rule) continue; // Skip if the rule is not present
+  
           switch (recurrenceTypes.indexOf(key)) {
             case 0:
               return this.parseDailyRule(rule);
-              break;
             case 1:
               return this.parseWeeklyRule(rule);
-              break;
             case 2:
               return this.parseMonthlyRule(rule);
-              break;
             case 3:
               return this.parseMonthlyByDayRule(rule);
-              break;
             case 4:
               return this.parseYearlyRule(rule);
-              break;
             case 5:
               return this.parseYearlyByDayRule(rule);
-              break;
             default:
               continue;
           }
         }
+      } else {
+        return "Invalid recurrence format";
       }
-
     } catch (error) {
-      // Handle parsing errors by rejecting the promise
+      // Handle parsing errors
       throw new Error(`Error parsing recurrence data: ${error.message}`);
     }
   }
 
-
   /**
    *
    *
@@ -868,8 +875,6 @@ export class Event extends React.Component<IEventProps, IEventState> {
    */
   public async returnRecurrenceInfo(startDate: Date, recurrenceData: string) {
     this.returnedRecurrenceInfo = { recurrenceData: recurrenceData, eventDate: startDate, endDate: moment().add(20, 'years').toDate() };
-    //this.setState({ editRecurrenceSeries:false})
-    //console.log(this.returnedRecurrenceInfo);
   }
 
 

samples/react-calendar/src/controls/Event/event.tsx

@@ -25,11 +25,9 @@
       "webpack-env"
     ],
     "lib": [
-      "es5",
-      "dom",
-      "es2015.collection",
-      "es2015.promise"
-    ]
+      "es2016",
+       "dom"
+      ],
   },
   "include": [
     "src/**/*.ts",

samples/react-calendar/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "name": "SPFx 1.18.2",
+  "image": "docker.io/m365pnp/spfx:1.18.2",
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "editorconfig.editorconfig",
+        "dbaeumer.vscode-eslint"
+      ]
+    }
+  },
+  "forwardPorts": [
+    4321,
+    35729,
+    5432
+  ],
+  "portsAttributes": {
+    "4321": {
+      "protocol": "https",
+      "label": "Manifest",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    },
+    "5432": {
+      "protocol": "https",
+      "label": "Workbench",
+      "onAutoForward": "silent"
+    },
+    "35729": {
+      "protocol": "https",
+      "label": "LiveReload",
+      "onAutoForward": "silent",
+      "requireLocalPort": true
+    }
+  },
+  "postCreateCommand": "bash .devcontainer/spfx-startup.sh",
+  "remoteUser": "node"
+}

samples/react-carousel/package-lock.json

@@ -0,0 +1,33 @@
+echo
+echo -e "\e[1;94mInstalling Node dependencies\e[0m"
+npm install
+
+## commands to create dev certificate and copy it to the root folder of the project
+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
+
+# Copy the PEM ecrtificate for non-Windows hosts
+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
+  then
+    echo "# .CER Certificates" >> .gitignore
+    echo "*.cer" >> .gitignore
+fi
+
+## add *.pem to .gitignore to prevent certificates from being saved in repo
+if ! grep -Fxq '*.pem' ./.gitignore
+  then
+    echo "# .PEM Certificates" >> .gitignore
+    echo "*.pem" >> .gitignore
+fi
+
+echo
+echo -e "\e[1;92mReady!\e[0m"
+
+echo -e "\n\e[1;94m**********\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**********"