Merge pull request #5277 from ValerasNarbutas/feature/verionupgradeRe…

…actBirthday

samples/react-birthdays/.devcontainer/devcontainer.json

@@ -1,39 +1,38 @@
-// For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
 {
-	"name": "SPFx 1.16.1",
-	"image": "docker.io/m365pnp/spfx:1.16.1",
-	// Set *default* container specific settings.json values on container create.
-	"settings": {},
-	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"editorconfig.editorconfig",
-		"dbaeumer.vscode-eslint"
-	],
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [
-		4321,
-		35729
-	],
-	"portsAttributes": {
-		"4321": {
-			"protocol": "https",
-			"label": "Manifest",
-			"onAutoForward": "silent",
-			"requireLocalPort": true
-		},
-		// Not needed for SPFx>= 1.12.1
-		// "5432": {
-		// 	"protocol": "https",
-		// 	"label": "Workbench",
-		// 	"onAutoForward": "silent"
-		// },
-		"35729": {
-			"protocol": "https",
-			"label": "LiveReload",
-			"onAutoForward": "silent",
-			"requireLocalPort": true
-		}
-	},
-	"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
-	"remoteUser": "node"
+  "name": "SPFx 1.20.0",
+  "image": "docker.io/m365pnp/spfx:1.20.0",
+  "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-birthdays/.gitignore

@@ -9,9 +9,9 @@ node_modules
 # Build generated files
 dist
 lib
+release
 solution
 temp
-release
 *.sppkg
 .heft
 

samples/react-birthdays/.npmignore

@@ -13,4 +13,4 @@ tslint.json
 *.log
 
 .yo-rc.json
-.vscode
+.vscode

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

@@ -1,18 +1,21 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.16.1",
-    "nodeVersion": "14.18.1",
+    "plusBeta": false,
+    "isCreatingSolution": true,
+    "nodeVersion": "18.17.1",
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
     "libraryName": "happy-birthday",
-    "libraryId": "57890dd1-b655-4ec8-85ec-e47a9b696e7c",
+    "libraryId": "474e78f8-113f-4057-a9a9-640241137620",
     "environment": "spo",
     "packageManager": "npm",
-    "isCreatingSolution": true,
+    "solutionName": "happy-birthday",
+    "solutionShortDescription": "happy-birthday description",
+    "skipFeatureDeployment": true,
     "isDomainIsolated": false,
-    "componentType": "webpart",
-    "sdkVersions": {
-      "@microsoft/microsoft-graph-client": "3.0.2",
-      "@microsoft/teams-js": "2.4.1"
-    }
-
+    "componentType": "webpart"
   }
 }

samples/react-birthdays/README.md

@@ -8,7 +8,7 @@ Now is possible to the user select an image for the background in the properties
 
 
 There is an Azure function available that get AAD user birthdays, this function creates a list on the tenant root site, if it does not exist.
-See the local.settings.json for details on the required application variable located in SyncUsersBirthdaysFunction folder.
+See the `local.settings.json` for details on the required application variable located in SyncUsersBirthdaysFunction folder.
 
 But you can synchronize the Birthdays list with other applications HR Systems, or other sources
 
@@ -25,8 +25,8 @@ But you can synchronize the Birthdays list with other applications HR Systems, o
 
 This sample is optimally compatible with the following environment configuration:
 
-![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
-![Node.js v16 | v14 | v12](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%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")
@@ -60,6 +60,7 @@ email | Text | true
 
 * [João Mendes](https://github.com/joaojmendes)
 * [Sajal Maity](https://github.com/smaity)
+* [Valeras Narbutas](https://github.com/ValerasNarbutas)
 
 ## Version history
 
@@ -70,6 +71,7 @@ Version|Date|Comments
 2.0.0|June 16, 2021 | Upgraded to SPFx 1.12.1
 3.0.0|April 7, 2022 | Upgraded to SPFx 1.14.0
 4.0.0|March 6, 2023 | Upgraded to SPFx 1.16.1
+5.0.0|October 2, 2024 | Upgraded to SPFx 1.20.0
 
 ## Minimal Path to Awesome
 
@@ -86,9 +88,11 @@ Version|Date|Comments
 
 
 ## Features
+
 This project contains sample Birthday web parts built on the SharePoint Framework using React
 and an Azure Function to get user Birthdays from AAD.
 This sample illustrates the following concepts on top of the SharePoint Framework:
+
 - using React for building SharePoint Framework client-side web parts
 - using React components for building Birthday web part
 - using MSGraph API to get data from SharePoint Lists 

samples/react-birthdays/assets/sample.json

@@ -9,7 +9,7 @@
       "The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant\u0027s root site with title \u0022Birthdays.\u0022"
     ],
     "creationDateTime": "2019-07-23",
-    "updateDateTime": "2023-03-06",
+    "updateDateTime": "2024-10-02",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.16.1"
+        "value": "1.20.2"
       },
       {
         "key": "SPFX-TEAMSTAB",

samples/react-birthdays/config/config.json

@@ -5,16 +5,16 @@
     "happy-birthday-web-part": {
       "components": [
         {
-          "entrypoint": "./lib/webparts/Birthdays/BirthdaysWebPart.js",
-          "manifest": "./src/webparts/Birthdays/BirthdaysWebPart.manifest.json"
+          "entrypoint": "./lib/webparts/birthdays/BirthdaysWebPart.js",
+          "manifest": "./src/webparts/birthdays/BirthdaysWebPart.manifest.json"
         }
       ]
     }
   },
   "externals": {},
   "localizedResources": {
-    "ControlStrings": "lib/controls/HappyBirthdayCard/loc/{locale}.js",
-    "BirthdaysWebPartStrings": "lib/webparts/Birthdays/loc/{locale}.js",
-    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+    "BirthdaysWebPartStrings": "lib/webparts/birthdays/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js",
+    "ControlStrings": "lib/controls/HappyBirthdayCard/loc/{locale}.js"
   }
 }

samples/react-birthdays/config/deploy-azure-storage.json

@@ -4,4 +4,4 @@
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "happy-birthday",
   "accessKey": "<!-- ACCESS KEY -->"
-}
+}

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

@@ -3,16 +3,16 @@
   "solution": {
     "name": "happy-birthday-anniversary-client-side-solution",
     "id": "474e78f8-113f-4057-a9a9-640241137620",
-    "version": "4.0.0.0",
+    "version": "5.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
     "developer": {
       "name": "",
+      "websiteUrl": "",
       "privacyUrl": "",
       "termsOfUseUrl": "",
-      "websiteUrl": "",
-      "mpnId": "Undefined-1.16.1"
+      "mpnId": "Undefined-1.20.0"
     },
     "metadata": {
       "shortDescription": {

samples/react-birthdays/config/sass.json

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

samples/react-birthdays/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"
 }

samples/react-birthdays/config/write-manifests.json

@@ -1,4 +1,4 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
-  "cdnBasePath": "<!-- PATH TO CDN -->"
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
 }

samples/react-birthdays/gulpfile.js

@@ -1,8 +1,8 @@
 '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.`);
 
 var getTasks = build.rig.getTasks;
@@ -14,4 +14,12 @@ build.rig.getTasks = function () {
   return result;
 };
 
+// Custom task to copy assets
+gulp.task('copy-assets', function () {
+  return gulp.src('src/assets/**/*')
+  .pipe(gulp.dest('lib/assets'))   
+    .pipe(gulp.dest('dist/assets')); 
+});
+build.task('pre-copy', gulp.series('copy-assets'));
+// build.rig.addPostBuildTask(gulp.task('copy-assets'));
 build.initialize(require('gulp'));