Upgraded to SPFx v1.13.1

samples/react-quotes/.editorconfig

@@ -1,25 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# we recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[{package,bower}.json]
-indent_style = space
-indent_size = 2

samples/react-quotes/.gitignore

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

samples/react-quotes/.npmignore

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

samples/react-quotes/.vscode/launch.json

@@ -4,23 +4,7 @@
    * Chrome browser: https://aka.ms/spfx-debugger-extensions
    */
   "version": "0.2.0",
-  "configurations": [{
+  "configurations": [
-      "name": "Local workbench",
-      "type": "chrome",
-      "request": "launch",
-      "url": "https://localhost:4321/temp/workbench.html",
-      "webRoot": "${workspaceRoot}",
-      "sourceMaps": true,
-      "sourceMapPathOverrides": {
-        "webpack:///.././src/*": "${webRoot}/src/*",
-        "webpack:///../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../src/*": "${webRoot}/src/*",
-        "webpack:///../../../../../src/*": "${webRoot}/src/*"
-      },
-      "runtimeArgs": [
-        "--remote-debugging-port=9222"
-      ]
-    },
     {
       "name": "Hosted workbench",
       "type": "chrome",

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

@@ -2,7 +2,7 @@
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.9.1",
+    "version": "1.13.1",
     "libraryName": "react-quotes",
     "libraryId": "aa9211b8-e9b8-44bf-a804-af2db58bc03e",
     "packageManager": "npm",

samples/react-quotes/README.md

@@ -9,12 +9,11 @@ This web part displays a quote of the day by querying a third-party api or can d
 
 # Compatibility
 
-![SPFx 1.9.1](https://img.shields.io/badge/SPFx-1.9.1-green.svg) 
+![SPFx 1.13.1](https://img.shields.io/badge/SPFx-1.13.1-green.svg)
-![Node.js v10 | v8](https://img.shields.io/badge/Node.js-v10%20%7C%20v8-green.svg) 
+![Node.js v14](https://img.shields.io/badge/Node.js-v14-green.svg)
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
 ![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 Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
 ![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
 
 ## Applies to
@@ -31,6 +30,7 @@ react-quotes | Zach Roberts
 
 Version|Date|Comments
 -------|----|--------
+1.1| December 31, 2021| Upgraded for SPFx v1.13.1
 1.0| November 11, 2019| Initial Release
 
 ## Minimal Path to Awesome

samples/react-quotes/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": "react-quotes",
   "accessKey": "<!-- ACCESS KEY -->"

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

@@ -3,9 +3,16 @@
   "solution": {
     "name": "react-quotes-client-side-solution",
     "id": "aa9211b8-e9b8-44bf-a804-af2db58bc03e",
-    "version": "1.0.0.0",
+    "version": "1.1.0.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "Zach Roberts",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "websiteUrl": "",
+      "mpnId": ""
+    }
   },
   "paths": {
     "zippedPackage": "solution/react-quotes.sppkg"

samples/react-quotes/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-quotes/gulpfile.js

@@ -4,4 +4,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'));
+
+  return result;
+};
+
 build.initialize(gulp);

samples/react-quotes/package.json

@@ -12,32 +12,27 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.9.1",
+    "@microsoft/sp-core-library": "1.13.1",
-    "@microsoft/sp-lodash-subset": "1.9.1",
+    "@microsoft/sp-lodash-subset": "1.13.1",
-    "@microsoft/sp-office-ui-fabric-core": "1.9.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.13.1",
-    "@microsoft/sp-webpart-base": "1.9.1",
+    "@microsoft/sp-property-pane": "1.13.1",
+    "@microsoft/sp-webpart-base": "1.13.1",
     "@pnp/spfx-property-controls": "1.16.0",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "16.8.8",
-    "@types/react-dom": "16.8.3",
-    "@types/webpack-env": "1.13.1",
     "axios": "^0.19.0",
-    "office-ui-fabric-react": "6.189.2",
+    "office-ui-fabric-react": "7.174.1",
-    "react": "16.8.5",
+    "react": "16.13.1",
-    "react-dom": "16.8.5"
+    "react-dom": "16.13.1"
-  },
-  "resolutions": {
-    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.9.1",
+    "@types/react": "16.8.8",
-    "@microsoft/sp-tslint-rules": "1.9.1",
+    "@types/react-dom": "^17.0.11",
-    "@microsoft/sp-module-interfaces": "1.9.1",
+    "@microsoft/sp-build-web": "1.13.1",
-    "@microsoft/sp-webpart-workbench": "1.9.1",
+    "@microsoft/sp-module-interfaces": "1.13.1",
-    "@microsoft/rush-stack-compiler-2.9": "0.7.16",
+    "@microsoft/sp-tslint-rules": "1.13.1",
-    "gulp": "~3.9.1",
+    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
-    "@types/chai": "3.4.34",
+    "@types/es6-promise": "0.0.33",
-    "@types/mocha": "2.2.38",
+    "@types/webpack-env": "1.13.1",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "4.0.2"
   }
 }

samples/react-quotes/src/webparts/reactQuotes/ReactQuotesWebPart.ts

@@ -1,17 +1,12 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-  BaseClientSideWebPart,
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField
-} from '@microsoft/sp-webpart-base';
-
 import * as strings from 'ReactQuotesWebPartStrings';
 import ReactQuotes from './components/ReactQuotes';
 import { IReactQuotesProps } from './components/IReactQuotesProps';
-import { PropertyFieldColorPicker, PropertyFieldColorPickerStyle } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
+import { PropertyFieldColorPicker } from '@pnp/spfx-property-controls/lib/PropertyFieldColorPicker';
-import { PropertyPaneToggle } from '@microsoft/sp-property-pane';
+import { PropertyPaneToggle, IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
 
 export interface IReactQuotesWebPartProps {
   description: string;
@@ -25,7 +20,7 @@ export interface IReactQuotesWebPartProps {
 export default class ReactQuotesWebPart extends BaseClientSideWebPart<IReactQuotesWebPartProps> {
 
   public render(): void {
-    const element: React.ReactElement<IReactQuotesProps > = React.createElement(
+    const element: React.ReactElement<IReactQuotesProps> = React.createElement(
       ReactQuotes,
       {
         description: this.properties.description,

samples/react-quotes/src/webparts/reactQuotes/components/ReactQuotes.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import styles from './ReactQuotes.module.scss';
 import { IReactQuotesProps } from './IReactQuotesProps';
 import { IReactQuotesState } from './IReactQuotesState';
-import { escape } from '@microsoft/sp-lodash-subset';
+import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
-import { Spinner } from  'office-ui-fabric-react/lib/spinner';
 import axios from 'axios';
 
 export default class ReactQuotes extends React.Component<IReactQuotesProps, IReactQuotesState> {
 
-  constructor(props: IReactQuotesProps){
+  constructor(props: IReactQuotesProps) {
     super(props);
 
     this.state = {
@@ -20,26 +19,26 @@ export default class ReactQuotes extends React.Component<IReactQuotesProps, IRea
 
   public render(): React.ReactElement<IReactQuotesProps> {
     return (
-      <div className={ styles.reactQuotes }>
+      <div className={styles.reactQuotes}>
         <h2>{this.props.description}</h2>
         {this.state.loading !== true ?
           //If state is loading show spinner otherwise show quote
-        <div>
-          {this.props.manual !== true ?
-          //If manual quote is not on then show quote generated from third party
           <div>
-            <h3 style={{color: this.props.quoteColor}}>"<i>{this.state.quote}</i>"</h3>
+            {this.props.manual !== true ?
-            <h5 style={{color: this.props.authorColor}}>- {this.state.author}</h5>
+              //If manual quote is not on then show quote generated from third party
+              <div>
+                <h3 style={{ color: this.props.quoteColor }}>"<i>{this.state.quote}</i>"</h3>
+                <h5 style={{ color: this.props.authorColor }}>- {this.state.author}</h5>
+              </div>
+              : //Show Manual quote
+              <div>
+                <h3 style={{ color: this.props.quoteColor }}>"<i>{this.props.manualQuote}</i>"</h3>
+                <h5 style={{ color: this.props.authorColor }}>- {this.props.manualAuthor}</h5>
+              </div>
+            }
           </div>
-          : //Show Manual quote
+          :
           <div>
-            <h3 style={{color: this.props.quoteColor}}>"<i>{this.props.manualQuote}</i>"</h3>
-            <h5 style={{color: this.props.authorColor}}>- {this.props.manualAuthor}</h5>
-          </div>
-          }
-        </div>
-        :
-        <div>
             <Spinner label="Loading quote..." />
           </div>
         }
@@ -47,9 +46,9 @@ export default class ReactQuotes extends React.Component<IReactQuotesProps, IRea
     );
   }
 
- public componentDidMount() {
+  public componentDidMount() {
-   console.log(this.props.manual);
+    console.log(this.props.manual);
-   this.setState({loading: true});
+    this.setState({ loading: true });
     axios.get('https://favqs.com/api/qotd').then(res => {
       const quote = res.data.quote.body;
       const author = res.data.quote.author;

samples/react-quotes/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-2.9/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-quotes/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,