Merge pull request #2767 from pnp/react-page-navigator

Processing #2721

samples/react-page-navigator/.npmignore

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

samples/react-page-navigator/.yo-rc.json

@@ -18,7 +18,7 @@
     "environment": "spo",
     "framework": "react",
     "isCreatingSolution": true,
-    "version": "1.12.1",
+    "version": "1.14.0",
     "libraryName": "navigator",
     "libraryId": "065ee566-e00d-4058-bbfd-356c8d9a8005",
     "packageManager": "npm",

samples/react-page-navigator/README.md

@@ -10,8 +10,8 @@ When added to a Vertical Section it can be used as a Contents table for the page
 
 ## Compatibility
 
-![SPFx 1.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
+![SPFx 1.14.0](https://img.shields.io/badge/SPFx-1.14.0-green.svg)
-![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) 
+![Node.js v14 | v12](https://img.shields.io/badge/Node.js-v14%20%7C%20v12-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")
@@ -25,13 +25,16 @@ Version|Date|Comments
 -------|----|--------
 1.0|September 5, 2019|Initial release
 1.1|October 20, 2021|SPFx Upgraded to 1.12.1 and code refactored
+1.2|May, 2022|SPFx Upgraded to 1.14.0
 
 ## Minimal Path to Awesome
 
-- `git clone` the repo
+* Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-page-navigator) then unzip it)
-- `npm i`
+* From your command line, change your current directory to the directory containing this sample (`react-page-navigator`, located under `samples`)
-- `gulp bundle --ship`
+* in the command line run:
-- `gulp package-solution --ship`
+  - `npm i`
+  - `gulp bundle --ship`
+  - `gulp package-solution --ship`
 - Add the app package to Site Collection App Catalog and Install the App
 - Add the web part to a page in the Site Collection
 

samples/react-page-navigator/assets/sample.json

@@ -9,7 +9,7 @@
       "This web part fetches all the automatically added Header anchor tags in a SharePoint page and displays them in a Navigation component."
     ],
     "creationDateTime": "2019-09-05",
-    "updateDateTime": "2021-10-20",
+    "updateDateTime": "2022-05-31",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.12.1"
+        "value": "1.14.0"
       }
     ],
     "thumbnails": [

samples/react-page-navigator/config/package-solution.json

@@ -10,9 +10,28 @@
     },
     "name": "react-page-navigator",
     "id": "065ee566-e00d-4058-bbfd-356c8d9a8005",
-    "version": "1.1.0.0",
+    "version": "1.2.0.0",
     "includeClientSideAssets": true,
-    "isDomainIsolated": false
+    "isDomainIsolated": false,
+    "metadata": {
+      "shortDescription": {
+        "default": "navigator description"
+      },
+      "longDescription": {
+        "default": "navigator description"
+      },
+      "screenshotPaths": [],
+      "videoUrl": "",
+      "categories": []
+    },
+    "features": [
+      {
+        "title": "navigator Feature",
+        "description": "The feature that activates elements of the navigator solution.",
+        "id": "021884c2-d7b3-4937-9d58-5ae47e1adfb7",
+        "version": "1.1.0.0"
+      }
+    ]
   },
   "paths": {
     "zippedPackage": "solution/react-page-navigator.sppkg"

samples/react-page-navigator/config/serve.json

@@ -2,7 +2,7 @@
   "$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-page-navigator/gulpfile.js

@@ -1,36 +1,19 @@
-'use strict';
-
-// check if gulp dist was called
-if (process.argv.indexOf('dist') !== -1) {
-    // add ship options to command call
-    process.argv.push('--ship');
-}
-
-const path = require('path');
-const gulp = require('gulp');
 const build = require('@microsoft/sp-build-web');
-const gulpSequence = require('gulp-sequence');
 
 build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
 
-// Create clean distrubution package
-gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
-// Create clean development package
-gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));
-
-
-
-
-/**
- * Custom Framework Specific gulp tasks
- */
-
 var getTasks = build.rig.getTasks;
 build.rig.getTasks = function () {
-  var result = getTasks.call(build.rig);
+    var result = getTasks.call(build.rig);
 
-  result.set('serve', result.get('serve-deprecated'));
+    result.set('serve', result.get('serve-deprecated'));
 
-  return result;
+    return result;
 };
-build.initialize(gulp);
+
+// ********* ADDED *******
+// disable tslint
+build.tslintCmd.enabled = false;
+// ********* ADDED *******
+
+build.initialize(require('gulp'));

samples/react-page-navigator/package.json

@@ -12,30 +12,28 @@
     "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.12.1",
+    "@microsoft/rush-stack-compiler-4.2": "^0.1.2",
-    "@microsoft/sp-lodash-subset": "1.12.1",
+    "@microsoft/sp-core-library": "1.14.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.12.1",
+    "@microsoft/sp-lodash-subset": "1.14.0",
-    "@microsoft/sp-property-pane": "1.12.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.14.0",
-    "@microsoft/sp-webpart-base": "1.12.1",
+    "@microsoft/sp-property-pane": "1.14.0",
-    "@pnp/pnpjs": "^1.3.5",
+    "@microsoft/sp-webpart-base": "1.14.0",
-    "@pnp/spfx-controls-react": "1.14.0",
+    "@pnp/sp": "^3.2.0",
-    "@pnp/spfx-property-controls": "1.16.0",
+    "@pnp/spfx-controls-react": "^3.7.2",
-    "office-ui-fabric-react": "7.156.0",
+    "@pnp/spfx-property-controls": "^3.6.0",
-    "react": "16.9.0",
+    "office-ui-fabric-react": "^7.185.3",
-    "react-dom": "16.9.0"
+    "react": "^16.14.0",
+    "react-dom": "16.13.1"
   },
   "resolutions": {
     "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-3.3": "0.1.7",
+    "@microsoft/sp-build-web": "1.14.0",
-    "@microsoft/rush-stack-compiler-3.7": "0.2.3",
+    "@microsoft/sp-module-interfaces": "1.14.0",
-    "@microsoft/sp-build-web": "1.12.1",
+    "@microsoft/sp-tslint-rules": "1.14.0",
-    "@microsoft/sp-module-interfaces": "1.12.1",
-    "@microsoft/sp-tslint-rules": "1.12.1",
-    "@microsoft/sp-webpart-workbench": "1.12.1",
     "@types/es6-promise": "0.0.33",
-    "@types/react": "16.9.36",
+    "@types/react": "16.9.51",
     "@types/react-dom": "16.9.8",
     "@types/webpack-env": "1.13.1",
     "@voitanos/jest-preset-spfx-react16": "^1.1.0",

samples/react-page-navigator/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.2/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
@@ -19,7 +19,8 @@
       "./node_modules/@microsoft"
     ],
     "types": [
-      "webpack-env"
+      "webpack-env",
+      "@types/jest"
     ],
     "lib": [
       "es5",