Merge pull request #3584 from ValerasNarbutas/upgrade/versionUpdate

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

@@ -1,7 +1,7 @@
 // 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.14.0",
+	"name": "SPFx 1.16.1",
-	"image": "docker.io/m365pnp/spfx:1.14.0",
+	"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.

samples/react-birthdays/.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-birthdays/.gitignore

@@ -13,6 +13,7 @@ solution
 temp
 release
 *.sppkg
+.heft
 
 # Coverage directory used by tools like istanbul
 coverage

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

@@ -1,12 +1,18 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.14.0",
+    "version": "1.16.1",
+    "nodeVersion": "14.18.1",
     "libraryName": "happy-birthday",
     "libraryId": "57890dd1-b655-4ec8-85ec-e47a9b696e7c",
     "environment": "spo",
     "packageManager": "npm",
     "isCreatingSolution": true,
     "isDomainIsolated": false,
-    "componentType": "webpart"
+    "componentType": "webpart",
+    "sdkVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.4.1"
+    }
+
   }
 }

samples/react-birthdays/README.md

@@ -1,6 +1,7 @@
 # Birthdays
 
 ## Summary
+
 The Web Part Birthdays shows the upcoming birthdays in the company, the web part reads birthdays from a list located on the tenant's root site with title "Birthdays."
 
 Now is possible to the user select an image for the background in the properties of the web part.
@@ -19,14 +20,18 @@ But you can synchronize the Birthdays list with other applications HR Systems, o
 
 | :warning: Important          |
 |:---------------------------|
-| 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.|
+| 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.   |
 
-![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14.0-green.svg)
+This sample is optimally compatible with the following environment configuration:
-![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20|%20v12-green.svg) 
+
-![SharePoint Online](https://img.shields.io/badge/SharePoint-Online-yellow.svg)
+![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
-![Teams N/A: Untested with Microsoft Teams](https://img.shields.io/badge/Teams-N%2FA-lightgrey.svg "Untested with Microsoft Teams") 
+![Node.js v16 | v14 | v12](https://img.shields.io/badge/Node.js-v16%20%7C%20v14%20%7C%20v12-green.svg)
-![Workbench Hosted: Does not work with local workbench](https://img.shields.io/badge/Workbench-Hosted-yellow.svg "Does not work with local workbench")
+![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")
+![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-green.svg)
 ![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
 
 ## Applies to
@@ -34,6 +39,8 @@ But you can synchronize the Birthdays list with other applications HR Systems, o
 * [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
 * [Microsoft 365 tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
 
+> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/m365devprogram)
+
 
 ## Prerequisites
  
@@ -62,6 +69,7 @@ Version|Date|Comments
 1.1.0|July 23, 2019 | new version
 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
 
 ## Minimal Path to Awesome
 

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": "2022-04-07",
+    "updateDateTime": "2023-03-06",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.14.0"
+        "value": "1.16.1"
       },
       {
         "key": "SPFX-TEAMSTAB",
@@ -220,6 +220,13 @@
       }
     ],
     "authors": [
+      {
+        "gitHubAccount": "ValerasNarbutas",
+        "company": "Macaw",
+        "pictureUrl": "https://github.com/ValerasNarbutas.png",
+        "name": "Valeras Narbutas",
+        "twitter": "ValerasNarbutas"
+      },
       {
         "gitHubAccount": "joaojmendes",
         "company": "Storm Technology Ltd",

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

@@ -3,7 +3,7 @@
   "solution": {
     "name": "happy-birthday-anniversary-client-side-solution",
     "id": "474e78f8-113f-4057-a9a9-640241137620",
-    "version": "3.0.0.0",
+    "version": "4.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
@@ -12,7 +12,7 @@
       "privacyUrl": "",
       "termsOfUseUrl": "",
       "websiteUrl": "",
-      "mpnId": "Undefined-1.14.0"
+      "mpnId": "Undefined-1.16.1"
     },
     "metadata": {
       "shortDescription": {
@@ -30,7 +30,7 @@
         "title": "birthdays-anniversary Feature",
         "description": "The feature that activates elements of the birthdays-anniversary solution.",
         "id": "22eb0871-ae82-49b1-8d14-9dd9e1ec4d30",
-        "version": "3.0.0.0"
+        "version": "4.0.0.0"
       }
     ],
     "webApiPermissionRequests": [

samples/react-birthdays/config/sass.json

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

samples/react-birthdays/config/serve.json

@@ -1,5 +1,5 @@
 {
-  "$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://enter-your-SharePoint-site/_layouts/workbench.aspx"

samples/react-birthdays/package.json

@@ -8,13 +8,18 @@
     "clean": "gulp clean",
     "test": "gulp test"
   },
+  "engines": {
+    "node": ">=16.13.0 <17.0.0"
+  },
   "dependencies": {
     "@microsoft/loader-set-webpack-public-path": "^3.4.5",
-    "@microsoft/sp-core-library": "1.14.0",
+    "@microsoft/sp-adaptive-card-extension-base": "1.16.1",
-    "@microsoft/sp-lodash-subset": "1.14.0",
+    "@microsoft/sp-core-library": "1.16.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
+    "@microsoft/sp-http": "^1.16.1",
-    "@microsoft/sp-property-pane": "1.14.0",
+    "@microsoft/sp-lodash-subset": "1.16.1",
-    "@microsoft/sp-webpart-base": "1.14.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.16.1",
+    "@microsoft/sp-property-pane": "1.16.1",
+    "@microsoft/sp-webpart-base": "1.16.1",
     "@pnp/common": "^1.3.11",
     "@pnp/graph": "^1.3.11",
     "@pnp/logging": "^1.3.11",
@@ -23,22 +28,29 @@
     "@pnp/spfx-controls-react": "3.7.2",
     "@pnp/spfx-property-controls": "1.12.0",
     "moment": "^2.29.1",
-    "office-ui-fabric-react": "7.174.1",
+    "office-ui-fabric-react": "7.199.1",
-    "react": "16.13.1",
+    "react": "17.0.1",
-    "react-dom": "16.13.1"
+    "react-dom": "17.0.1",
+    "tslib": "2.3.1"
   },
   "devDependencies": {
+    "@microsoft/eslint-config-spfx": "1.16.1",
+    "@microsoft/eslint-plugin-spfx": "1.16.1",
     "@microsoft/rush-stack-compiler-3.9": "0.4.48",
+    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
     "@microsoft/set-webpack-public-path-plugin": "^2.4.0",
-    "@microsoft/sp-build-web": "1.14.0",
+    "@microsoft/sp-build-web": "1.16.1",
-    "@microsoft/sp-module-interfaces": "1.14.0",
+    "@microsoft/sp-module-interfaces": "1.16.1",
-    "@microsoft/sp-tslint-rules": "1.14.0",
+    "@rushstack/eslint-config": "2.5.1",
     "@types/es6-promise": "0.0.33",
-    "@types/react": "16.9.51",
+    "@types/react": "17.0.45",
-    "@types/react-dom": "16.9.8",
+    "@types/react-dom": "17.0.17",
-    "@types/webpack-env": "1.13.1",
+    "@types/webpack-env": "1.15.2",
-    "ajv": "~5.2.2",
+    "ajv": "6.12.5",
-    "gulp": "4.0.2"
+    "eslint": "8.7.0",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "gulp": "4.0.2",
+    "typescript": "4.5.5"
   },
   "resolutions": {
     "@types/react": "16.8.8"

samples/react-birthdays/src/controls/happyBirthdayCard/HappyBirthdayCard.module.scss

@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@fluentui/react/dist/sass/References.scss';
 
 .happyBirthday {
   .documentCard {

samples/react-birthdays/src/controls/happyBirthdayCard/HappyBirthdayCard.tsx

@@ -16,7 +16,13 @@ const img: string = require('../../../assets/cof11.png');
 const IMG_WIDTH: number = 200;
 const IMG_HEIGTH: number = 190;
 
-const imageTemplate: { imageUrl: string }[] = [{
+interface IImageTemplate {
+  [key: string]: {
+    imageUrl: string
+  }
+}
+
+const imageTemplate: IImageTemplate[] = [{
   imageUrl: require('.../../../assets/cof.png')
 },
 {
@@ -115,9 +121,9 @@ export class HappyBirthdayCard extends React.Component<IHappyBirthdayCardProps,
         <div className={styles.documentCardWrapper}>
           <div className={styles.documentCard}>
             <Image
-
               imageFit={ImageFit.cover}
-              src={imageTemplate[this.props.imageTemplate].imageUrl}
+              // @ts-ignore: Object is possibly 'null'.
+              src={imageTemplate[this.props.imageTemplate]?.imageUrl}
               width={IMG_WIDTH}
               height={IMG_HEIGTH}
             />

samples/react-birthdays/src/controls/happybirthday/HappyBirthday.module.scss

@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@fluentui/react/dist/sass/References.scss';
 
 .happyBirthday {
   .backgroundImgBallons{

samples/react-birthdays/src/services/SPService.ts

@@ -1,9 +1,10 @@
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { MSGraphClient } from "@microsoft/sp-http";
+import { MSGraphClientV3  } from "@microsoft/sp-http";
 import * as moment from 'moment';
+import { version } from "react";
 
 export class SPService {
-  private graphClient: MSGraphClient = null;
+  private graphClient: MSGraphClientV3  = null;
   private  birthdayListTitle: string = "Birthdays";
   constructor(private _context: WebPartContext) {
 
@@ -44,7 +45,7 @@ export class SPService {
         _filter = "fields/Birthday ge '" + _today + "' and fields/Birthday le '" + _FinalDate + "'";
       }
 
-      this.graphClient = await this._context.msGraphClientFactory.getClient();
+      this.graphClient = await this._context.msGraphClientFactory.getClient('3');
       _results = await this.graphClient.api(`sites/root/lists('${this.birthdayListTitle}')/items?orderby=Fields/Birthday`)
         .version('v1.0')
         .expand('fields')

samples/react-birthdays/src/webparts/Birthdays/components/Birthdays.module.scss

@@ -1,4 +1,4 @@
-@import '~office-ui-fabric-react/dist/sass/References.scss';
+@import '~@fluentui/react/dist/sass/References.scss';
 
 .happyBirthday {
   .backgroundImgBallons{

samples/react-birthdays/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -14,6 +14,7 @@
     "noUnusedLocals": false,
     "inlineSources": false,
     "strictNullChecks": false,
+    "noImplicitAny": true,
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"

samples/react-birthdays/tslint.json

@@ -1,29 +0,0 @@
-{
-  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
-  "rules": {
-    "class-name": false,
-    "export-name": false,
-    "forin": false,
-    "label-position": false,
-    "member-access": true,
-    "no-arg": false,
-    "no-console": false,
-    "no-construct": false,
-    "no-duplicate-variable": true,
-    "no-eval": false,
-    "no-function-expression": true,
-    "no-internal-module": true,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-unnecessary-semicolons": true,
-    "no-unused-expression": true,
-    "no-with-statement": true,
-    "semicolon": true,
-    "trailing-comma": false,
-    "typedef": false,
-    "typedef-whitespace": false,
-    "use-named-parameter": true,
-    "variable-name": false,
-    "whitespace": false
-  }
-}