Upgrade project to SPFx 1.14.0

samples/react-birthdays/.npmignore

@@ -0,0 +1,16 @@
+!dist
+config
+
+gulpfile.js
+
+release
+src
+temp
+
+tsconfig.json
+tslint.json
+
+*.log
+
+.yo-rc.json
+.vscode

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

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.8.2",
+    "version": "1.14.0",
     "libraryName": "happy-birdthay",
     "libraryId": "57890dd1-b655-4ec8-85ec-e47a9b696e7c",
     "environment": "spo",

samples/react-birthdays/README.md

@@ -42,7 +42,7 @@ userAADGUID| Text| no | required if used Azure Function to get Birthdays from AA
 Title| Text| true
 email| Text| true
 
-> **IMPORTANT:** After create a column Index on column "Birthday"
+> **IMPORTANT:** Create index on column "Birthday".
 
 ## Solution
 
@@ -58,6 +58,7 @@ Version|Date|Comments
 1.0.0|November 6, 2018|Initial release
 1.1.0|July 23, 2019 | new version
 2.0.0|June 16, 2021 | Upgraded to SPFx 1.12.1
+3.0.0|April 6, 2022 | Upgraded to SPFx 1.14.0
 
 ## Minimal Path to Awesome
 

samples/react-birthdays/config/copy-assets.json

@@ -1,4 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
-  "deployCdnPath": "temp/deploy"
-}

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

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
-  "workingDir": "./temp/deploy/",
+  "workingDir": "./release/assets/",
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "happy-birdthay",
   "accessKey": "<!-- ACCESS KEY -->"

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

@@ -1,12 +1,38 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
-    "name": "happy-birdthay-anniversary-client-side-solution",
+    "name": "happy-birthday-anniversary-client-side-solution",
     "id": "474e78f8-113f-4057-a9a9-640241137620",
-    "version": "2.0.0.0",
+    "version": "3.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "",
+      "mpnId": "Undefined-1.14.0"
+    },
+    "metadata": {
+      "shortDescription": {
+        "default": "birthdays-anniversay"
+      },
+      "longDescription": {
+        "default": "birthdays-anniversay"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "birthdays-anniversay Feature",
+        "description": "The feature that activates elements of the birthdays-anniversay solution.",
+        "id": "22eb0871-ae82-49b1-8d14-9dd9e1ec4d30",
+        "version": "3.0.0.0"
+      }
+    ],
     "webApiPermissionRequests": [
       {
         "resource": "Microsoft Graph",

samples/react-birthdays/config/serve.json

@@ -2,9 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
+  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
 }

samples/react-birthdays/gulpfile.js

@@ -5,6 +5,13 @@ 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;
+build.rig.getTasks = function () {
+  var result = getTasks.call(build.rig);
 
+  result.set('serve', result.get('serve-deprecated'));
 
-build.initialize(gulp);
+  return result;
+};
+
+build.initialize(require('gulp'));

samples/react-birthdays/package.json

@@ -2,9 +2,7 @@
   "name": "birthdays-anniversay",
   "version": "2.0.0",
   "private": true,
-  "engines": {
+  "main": "lib/index.js",
-    "node": ">=0.10.0"
-  },
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
@@ -12,11 +10,11 @@
   },
   "dependencies": {
     "@microsoft/loader-set-webpack-public-path": "^3.4.5",
-    "@microsoft/rush-stack-compiler-3.2": "^0.3.37",
+    "@microsoft/sp-core-library": "1.14.0",
-    "@microsoft/sp-core-library": "1.8.2",
+    "@microsoft/sp-lodash-subset": "1.14.0",
-    "@microsoft/sp-lodash-subset": "1.8.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.8.2",
+    "@microsoft/sp-property-pane": "1.14.0",
-    "@microsoft/sp-webpart-base": "^1.12.1",
+    "@microsoft/sp-webpart-base": "1.14.0",
     "@pnp/common": "^1.3.11",
     "@pnp/graph": "^1.3.11",
     "@pnp/logging": "^1.3.11",
@@ -24,28 +22,25 @@
     "@pnp/sp": "^1.3.11",
     "@pnp/spfx-controls-react": "1.10.0",
     "@pnp/spfx-property-controls": "1.12.0",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "16.7.22",
-    "@types/react-dom": "16.8.0",
-    "@types/webpack-env": "1.13.1",
     "moment": "^2.29.1",
-    "office-ui-fabric-react": "6.143.0",
+    "office-ui-fabric-react": "7.174.1",
-    "react": "16.7.0",
+    "react": "16.13.1",
-    "react-dom": "16.7.0"
+    "react-dom": "16.13.1"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-2.9": "0.7.7",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.48",
     "@microsoft/set-webpack-public-path-plugin": "^2.4.0",
-    "@microsoft/sp-build-web": "^1.12.1",
+    "@microsoft/sp-build-web": "1.14.0",
-    "@microsoft/sp-module-interfaces": "1.8.2",
+    "@microsoft/sp-module-interfaces": "1.14.0",
-    "@microsoft/sp-tslint-rules": "1.8.2",
+    "@microsoft/sp-tslint-rules": "1.14.0",
-    "@microsoft/sp-webpart-workbench": "^1.12.1",
+    "@types/es6-promise": "0.0.33",
-    "@types/chai": "3.4.34",
+    "@types/react": "16.9.51",
-    "@types/mocha": "2.2.38",
+    "@types/react-dom": "16.9.8",
+    "@types/webpack-env": "1.13.1",
     "ajv": "~5.2.2",
-    "gulp": "~3.9.1"
+    "gulp": "4.0.2"
   },
   "resolutions": {
-    "@types/react": "16.7.22"
+    "@types/react": "16.8.8"
   }
 }

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

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .happyBirdthay {
   .documentCard {

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

@@ -2,9 +2,8 @@ import * as React from 'react';
 import styles from './HappyBirthdayCard.module.scss';
 import { IHappyBirthdayCardProps } from './IHappyBirthdayCardProps';
 import { IHappyBirthdayCardPState } from './IHappyBirthdayCardState';
-import { escape } from '@microsoft/sp-lodash-subset';
+import { IPersonaSharedProps, Persona, PersonaSize, IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
-import { IPersonaSharedProps, Persona, PersonaSize, IPersonaProps, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
+import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
-import { Image, IImageProps, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import * as strings from 'ControlStrings';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';

samples/react-birthdays/src/controls/happyBirthdayCard/IHappyBirthdayCardState.ts

@@ -1,4 +1,3 @@
 export interface IHappyBirthdayCardPState {
-
   isBirthdayToday: boolean;
 }

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

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

samples/react-birthdays/src/controls/happybirthday/HappyBirthday.tsx

@@ -2,29 +2,12 @@ import * as React from 'react';
 import styles from './HappyBirthday.module.scss';
 import { IHappyBirthdayProps } from './IHappyBirthdayProps';
 import { IHappbirthdayState } from './IHappybirthdayState';
-import { escape } from '@microsoft/sp-lodash-subset';
 import { IUser } from './IUser';
 import HappyBirdthayCard from '../../controls/happyBirthdayCard/HappyBirthdayCard';
 import * as moment from 'moment';
-import { Image, IImageProps, ImageFit } from 'office-ui-fabric-react/lib/Image';
-import { Label } from 'office-ui-fabric-react/lib/Label';
-import * as strings from 'ControlStrings';
 
 export class HappyBirthday extends React.Component<IHappyBirthdayProps, IHappbirthdayState> {
 
-  private _showBirthdays: boolean = true;
-  constructor(props: IHappyBirthdayProps) {
-    super(props);
-    console.log(props.imageTemplate);
-  }
-
-  public async componentDidMount() {
-  }
-
-  public componentDidUpdate(prevProps: IHappyBirthdayProps, prevState: IHappbirthdayState): void {
-  }
-
-  //
   public render(): React.ReactElement<IHappyBirthdayProps> {
     return (
       <div className={styles.happyBirthday}>

samples/react-birthdays/src/controls/happybirthday/IHappyBirthdayProps.ts

@@ -1,5 +1,5 @@
 import { IUser } from './IUser';
-import { WebPartContext } from "@microsoft/sp-webpart-base";
+
 export interface IHappyBirthdayProps {
   users: IUser[];
   imageTemplate: string;

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

@@ -1,13 +1,11 @@
-
 import { WebPartContext } from "@microsoft/sp-webpart-base";
-import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";
+import { MSGraphClient } from "@microsoft/sp-http";
-import { SPHttpClient, SPHttpClientResponse, MSGraphClient } from "@microsoft/sp-http";
 import * as moment from 'moment';
 
 export class SPService {
   private graphClient: MSGraphClient = null;
   private  birthdayListTitle: string = "Birthdays";
-  constructor(private _context: WebPartContext | ApplicationCustomizerContext) {
+  constructor(private _context: WebPartContext) {
 
   }
   // Get Profiles
@@ -21,9 +19,9 @@ export class SPService {
       _month = parseInt(moment().format('MM'));
       _day = parseInt(moment().format('DD'));
       _filter = "fields/Birthday ge '" + _today + "'";
-      // If we are in Dezember we have to look if there are birthday in January
+      // If we are in December we have to look if there are birthdays in January
       // we have to build a condition to select birthday in January based on number of upcommingDays
-      // we can not use the year for teste , the year is always 2000.
+      // we can not use the year for test, the year is always 2000.
       console.log(_month);
       _countdays = _day + upcommingDays;
       _f = 0;

samples/react-birthdays/src/webparts/Birthdays/BirthdaysWebPart.ts

@@ -13,7 +13,6 @@ import {
 import * as strings from 'BirthdaysWebPartStrings';
 import Birthdays from './components/Birthdays';
 import { IBirthdaysProps } from './components/IBirthdaysProps';
-import { Version } from '@microsoft/sp-core-library';
 
 export interface IBirthdaysWebPartProps {
   title: string;

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

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

samples/react-birthdays/src/webparts/Birthdays/components/Birthdays.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import styles from './Birthdays.module.scss';
 import { IBirthdaysProps } from './IBirthdaysProps';
-import { escape } from '@microsoft/sp-lodash-subset';
 import { HappyBirthday, IUser } from '../../../controls/happybirthday';
 import * as moment from 'moment';
 import { IBirthdayState } from './IBirthdaysState';
 import SPService from '../../../services/SPService';
 import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
 const imgBackgroundBallons: string = require('../../../../assets/ballonsBackgroud.png');
-import { Image, IImageProps, ImageFit } from 'office-ui-fabric-react/lib/Image';
+import { Image, ImageFit } from 'office-ui-fabric-react/lib/Image';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import * as strings from 'ControlStrings';
 

samples/react-birthdays/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.2/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,20 +19,17 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "es6-promise",
       "webpack-env"
     ],
     "lib": [
       "es5",
       "dom",
-      "es2015.collection"
+      "es2015.collection",
+      "es2015.promise"
     ]
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
-  ],
+    "src/**/*.tsx"
-  "exclude": [
-    "node_modules",
-    "lib"
   ]
 }

samples/react-birthdays/tslint.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
+  "extends": "./node_modules/@microsoft/sp-tslint-rules/base-tslint.json",
   "rules": {
     "class-name": false,
     "export-name": false,
@@ -17,7 +17,6 @@
     "no-switch-case-fall-through": true,
     "no-unnecessary-semicolons": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-with-statement": true,
     "semicolon": true,
     "trailing-comma": false,