Updated code and instructions

samples/react-adaptive-cards-image-gallery/README.md

@@ -79,11 +79,15 @@ Version|Date|Comments
 
 ## Minimal Path to Awesome
 
-- Clone this repo
+- Clone this repository.
+- On the command prompt, navigate to the web part folder and execute:
 - `npm i`
-- `gulp serve --nobrowser`
+- `gulp bundle --ship`
-- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
+- `gulp package-solution --ship`
-- Search and add web part "Adaptive Cards Image Gallery"
+- The package can be found at `\react-adaptive-cards-image-gallery\sharepoint\solution\react-adaptive-cards-image-gallery.sppkg`
+- [Deploy the package](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#deploy-the-helloworld-package-to-app-catalog) to the app catalog.
+- [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site.
+- [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Adaptive Cards Image Gallery".
 
 ## Features
 

samples/react-adaptive-cards-image-gallery/config/config.json

@@ -13,6 +13,7 @@
   },
   "externals": {},
   "localizedResources": {
-    "AdaptiveCardsImageGalleryWebPartStrings": "lib/webparts/adaptiveCardsImageGallery/loc/{locale}.js"
+    "AdaptiveCardsImageGalleryWebPartStrings": "lib/webparts/adaptiveCardsImageGallery/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
   }
 }

samples/react-adaptive-cards-image-gallery/package-lock.json

@@ -1516,11 +1516,6 @@
         "isomorphic-fetch": "^2.2.1"
       }
     },
-    "@microsoft/microsoft-graph-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/microsoft-graph-types/-/microsoft-graph-types-1.1.0.tgz",
-      "integrity": "sha1-CGRuRpJHpBRMcVFhoQgTh63nzTs="
-    },
     "@microsoft/node-core-library": {
       "version": "3.15.1",
       "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-3.15.1.tgz",
@@ -2518,6 +2513,200 @@
       "integrity": "sha512-518yewjSga1jLdiLrcmpMFlaba5P+50b0TWNFUpC+SL9Yzf0kMi57qw+bMl+rQ08cGqH1vLx4eg9YFUbZXgZ0Q==",
       "dev": true
     },
+    "@pnp/common": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@pnp/common/-/common-2.0.6.tgz",
+      "integrity": "sha512-/NghaEt1Q03+f1iAniRpxlciXmnTqvMFIdtjcA4HX80xVOtTiZT0Gz1GAjH7ebzBO1YtSiHri013/bhZM7beRQ==",
+      "requires": {
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/logging": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-2.0.6.tgz",
+      "integrity": "sha512-Jd63mqEarpuFsvy2EKNZpvsRHMaF1Ozo9/qHOZeKiSiZIvkNu4W41KgCD3BTS48saFY4870L5/gXzVo9Rkvqug==",
+      "requires": {
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/odata": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-2.0.6.tgz",
+      "integrity": "sha512-opU8Ifwmb/wbHtfmbBhsd2CzJhtAppNd7fbnW8dFOouCWa/udvsAc5NMuiT5sL8G9DDLQsnxZCxi83e5cao3aA==",
+      "requires": {
+        "@pnp/common": "2.0.6",
+        "@pnp/logging": "2.0.6",
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/sp": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-2.0.6.tgz",
+      "integrity": "sha512-AForkvQjGogym3z0bBS7XUZ7sNQDLuyE4CYAZBLUtsBS6BMr4r3QXpCSmFChgD6F8lG265Aw6IMnPzgiBDbQhQ==",
+      "requires": {
+        "@pnp/common": "2.0.6",
+        "@pnp/logging": "2.0.6",
+        "@pnp/odata": "2.0.6",
+        "tslib": "1.10.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+          "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+        }
+      }
+    },
+    "@pnp/spfx-controls-react": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@pnp/spfx-controls-react/-/spfx-controls-react-1.19.0.tgz",
+      "integrity": "sha512-W3PS6I8NsdbOZjE9I9djloYutQW17QHd4nT7jFwPyJFoxnt1MDfWyN6nrPhaeGnnPde3t3TlUbWP4HKLXChFiw==",
+      "requires": {
+        "@pnp/common": "1.0.1",
+        "@pnp/logging": "1.0.1",
+        "@pnp/odata": "1.0.1",
+        "@pnp/sp": "1.0.1",
+        "@pnp/telemetry-js": "2.0.0",
+        "@types/chart.js": "2.7.40",
+        "chart.js": "2.7.3",
+        "color": "^3.1.2",
+        "lodash": "4.17.13",
+        "office-ui-fabric-react": "5.131.0",
+        "react-quill": "1.3.3"
+      },
+      "dependencies": {
+        "@pnp/common": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@pnp/common/-/common-1.0.1.tgz",
+          "integrity": "sha1-T+cuONHexjlQSvxxQclSEh5YqOk=",
+          "requires": {
+            "tslib": "1.8.1"
+          }
+        },
+        "@pnp/logging": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@pnp/logging/-/logging-1.0.1.tgz",
+          "integrity": "sha1-Nl1/dmiW943xIMgd9D3dlrCgojY=",
+          "requires": {
+            "tslib": "1.8.1"
+          }
+        },
+        "@pnp/odata": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@pnp/odata/-/odata-1.0.1.tgz",
+          "integrity": "sha1-yE5s/MV2VdZj2IEFlgGT8yiOwAI=",
+          "requires": {
+            "tslib": "1.8.1"
+          }
+        },
+        "@pnp/sp": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/@pnp/sp/-/sp-1.0.1.tgz",
+          "integrity": "sha1-5XXJVqZWk9KRkI4yEdzWbc5KFWM=",
+          "requires": {
+            "tslib": "1.8.1"
+          }
+        },
+        "@uifabric/icons": {
+          "version": "5.8.0",
+          "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.8.0.tgz",
+          "integrity": "sha512-EUhKxYlIPJshg4fQvCNTYSk0p7RhzEWeEAJBV4sao1SKmN0/pZBnkLbDqWjU5VUfdwZZYiIdaLRpM+pyzhniZw==",
+          "requires": {
+            "@uifabric/styling": ">=5.30.1 <6.0.0",
+            "tslib": "^1.7.1"
+          }
+        },
+        "@uifabric/merge-styles": {
+          "version": "5.17.1",
+          "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz",
+          "integrity": "sha512-4/EtO6Ns7kNtKxC+6InShwVQeNQEDT5H8Ex7m/i4OrT9i7csje4YwBQPkkpm31qJwEZEyD7bbAwyLezI63sLhg==",
+          "requires": {
+            "tslib": "^1.7.1"
+          }
+        },
+        "@uifabric/styling": {
+          "version": "5.37.0",
+          "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.37.0.tgz",
+          "integrity": "sha512-3hC0itW/hWSD5J4uANzUKk8XVGWUNkU+VLjEjWsQ6i5lvwFGaanR6Qy0bTkZdFGqFWMXe91CkBHV7HnvEx7tCA==",
+          "requires": {
+            "@microsoft/load-themed-styles": "^1.7.13",
+            "@uifabric/merge-styles": ">=5.17.1 <6.0.0",
+            "@uifabric/utilities": ">=5.34.2 <6.0.0",
+            "tslib": "^1.7.1"
+          }
+        },
+        "@uifabric/utilities": {
+          "version": "5.34.3",
+          "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.34.3.tgz",
+          "integrity": "sha512-6dERFkNNCUrPUuNG1nxlDDvt7DN5hxb41zp9AmKhK5cXZTYCblmlLBvb/qyielCnicfoagoA+lqH9NgnSE8u/A==",
+          "requires": {
+            "@uifabric/merge-styles": ">=5.17.1 <6.0.0",
+            "prop-types": "^15.5.10",
+            "tslib": "^1.7.1"
+          }
+        },
+        "lodash": {
+          "version": "4.17.13",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.13.tgz",
+          "integrity": "sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA=="
+        },
+        "office-ui-fabric-react": {
+          "version": "5.131.0",
+          "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.131.0.tgz",
+          "integrity": "sha512-QOYu1uf92qhTTIlBAj8teKvRpCmpliRZjynYtgeeUbDm4C4GtXdb/O1rPNFsfT0PNtPC8dCNeQ7/CXjQenUkyw==",
+          "requires": {
+            "@microsoft/load-themed-styles": "^1.7.13",
+            "@uifabric/icons": ">=5.8.0 <6.0.0",
+            "@uifabric/merge-styles": ">=5.17.1 <6.0.0",
+            "@uifabric/styling": ">=5.36.0 <6.0.0",
+            "@uifabric/utilities": ">=5.34.2 <6.0.0",
+            "prop-types": "^15.5.10",
+            "tslib": "^1.7.1"
+          }
+        },
+        "tslib": {
+          "version": "1.8.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.1.tgz",
+          "integrity": "sha1-aUavLR1lGnsYY7Ux1uWvpBqkTqw="
+        }
+      }
+    },
+    "@pnp/telemetry-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@pnp/telemetry-js/-/telemetry-js-2.0.0.tgz",
+      "integrity": "sha512-qFNm3mTerTnxgTR6c/4iMMt8EUKrQn5z0XG/IQtpNlp6m7KXRDFR87mQKeBVtSv2LhxGO0VNFndKJIibBw52zQ==",
+      "requires": {
+        "whatwg-fetch": "2.0.4"
+      },
+      "dependencies": {
+        "whatwg-fetch": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz",
+          "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng=="
+        }
+      }
+    },
     "@pnpm/link-bins": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@pnpm/link-bins/-/link-bins-1.0.4.tgz",
@@ -2629,6 +2818,11 @@
       "integrity": "sha1-ox10JBprHtu5c8822XooloNKUfk=",
       "dev": true
     },
+    "@types/chart.js": {
+      "version": "2.7.40",
+      "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.7.40.tgz",
+      "integrity": "sha512-yC8Ff5vsHFTClGCWXoAmNCh33cNYfP2/yFANBLjLiso4jTKsLfQ0KQuBEuKxOWTRoOSLyT6v+ZYcvz0uonvvsA=="
+    },
     "@types/es6-promise": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/@types/es6-promise/-/es6-promise-0.0.33.tgz",
@@ -2717,11 +2911,6 @@
         "@types/node": "*"
       }
     },
-    "@types/microsoft-ajax": {
-      "version": "0.0.35",
-      "resolved": "https://registry.npmjs.org/@types/microsoft-ajax/-/microsoft-ajax-0.0.35.tgz",
-      "integrity": "sha512-uM+VKi5q/EjhsCSfH/raPPB5qxuSuOIgmn03LEpDrvDKgsFxvTFeeaRIgib2imNAm7GOQ4MhgsNWiIRGK/YxcQ=="
-    },
     "@types/mime": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
@@ -2794,6 +2983,14 @@
       "integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==",
       "dev": true
     },
+    "@types/quill": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/@types/quill/-/quill-1.3.10.tgz",
+      "integrity": "sha512-IhW3fPW+bkt9MLNlycw8u8fWb7oO7W5URC9MfZYHBlA24rex9rs23D5DETChu1zvgVdc5ka64ICjJOgQMr6Shw==",
+      "requires": {
+        "parchment": "^1.1.2"
+      }
+    },
     "@types/ramda": {
       "version": "0.25.51",
       "resolved": "https://registry.npmjs.org/@types/ramda/-/ramda-0.25.51.tgz",
@@ -2863,14 +3060,6 @@
         "@types/mime": "*"
       }
     },
-    "@types/sharepoint": {
-      "version": "2013.1.9",
-      "resolved": "https://registry.npmjs.org/@types/sharepoint/-/sharepoint-2013.1.9.tgz",
-      "integrity": "sha512-OP3D/vKnOnZcRwTu2jdt7gp8AGDKx3jFoBHudR7UUX4IIwDqOPEJdkfvIpz/KiQbbbyvWS0PtvDz3iQ1HH/rcw==",
-      "requires": {
-        "@types/microsoft-ajax": "*"
-      }
-    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -3854,8 +4043,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-      "dev": true
     },
     "asn1": {
       "version": "0.2.4",
@@ -4952,6 +5140,32 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.js": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.7.3.tgz",
+      "integrity": "sha512-3+7k/DbR92m6BsMUYP6M0dMsMVZpMnwkUyNSAbqolHKsbIzH2Q4LWVEHHYq7v0fmEV8whXE0DrjANulw9j2K5g==",
+      "requires": {
+        "chartjs-color": "^2.1.0",
+        "moment": "^2.10.2"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "^0.6.0",
+        "color-convert": "^1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "^1.0.0"
+      }
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -5089,8 +5303,7 @@
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
-      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
-      "dev": true
     },
     "clone-buffer": {
       "version": "1.0.0",
@@ -5163,7 +5376,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
       "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.1",
         "color-string": "^1.5.2"
@@ -5173,7 +5385,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -5181,14 +5392,12 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
-      "dev": true
     },
     "color-string": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
       "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
-      "dev": true,
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -5453,6 +5662,16 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-class": {
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
+      "requires": {
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5993,6 +6212,19 @@
         "esprima": "4.0.1"
       }
     },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "requires": {
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.1",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.2.0"
+      }
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -6052,7 +6284,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
       "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dev": true,
       "requires": {
         "object-keys": "^1.0.12"
       }
@@ -6462,7 +6693,6 @@
       "version": "1.17.6",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
       "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
-      "dev": true,
       "requires": {
         "es-to-primitive": "^1.2.1",
         "function-bind": "^1.1.1",
@@ -6481,7 +6711,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -6720,6 +6949,11 @@
         "through": "^2.3.8"
       }
     },
+    "eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+    },
     "events": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz",
@@ -6953,8 +7187,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
-      "dev": true
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -7077,6 +7310,11 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -7123,7 +7361,6 @@
       "version": "0.8.17",
       "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
       "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "dev": true,
       "requires": {
         "core-js": "^1.0.0",
         "isomorphic-fetch": "^2.1.1",
@@ -7137,8 +7374,7 @@
         "core-js": {
           "version": "1.2.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-          "dev": true
         }
       }
     },
@@ -7510,8 +7746,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-      "dev": true
     },
     "gauge": {
       "version": "2.7.4",
@@ -8398,7 +8633,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -8430,8 +8664,7 @@
     "has-symbols": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
-      "dev": true
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -9020,6 +9253,11 @@
         }
       }
     },
+    "is-arguments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -9044,8 +9282,7 @@
     "is-callable": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
-      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw=="
-      "dev": true
     },
     "is-ci": {
       "version": "1.2.1",
@@ -9093,8 +9330,7 @@
     "is-date-object": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
-      "dev": true
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -9259,7 +9495,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
       "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.1"
       }
@@ -9297,7 +9532,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
       "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.1"
       }
@@ -11210,8 +11444,7 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-      "dev": true
     },
     "lodash._basecopy": {
       "version": "3.0.1",
@@ -11833,6 +12066,11 @@
         "mkdirp": "*"
       }
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -12316,14 +12554,21 @@
     "object-inspect": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
-      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==",
+      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
-      "dev": true
+    },
+    "object-is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
+      "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
     },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-      "dev": true
     },
     "object-visit": {
       "version": "1.0.1",
@@ -12338,7 +12583,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
       "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.2",
         "function-bind": "^1.1.1",
@@ -12732,6 +12976,11 @@
         "no-case": "^2.2.0"
       }
     },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "parse-asn1": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.5.tgz",
@@ -13739,7 +13988,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "dev": true,
       "requires": {
         "asap": "~2.0.3"
       }
@@ -13871,6 +14119,29 @@
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
       "dev": true
     },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
     "ramda": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
@@ -13971,11 +14242,30 @@
         "scheduler": "^0.13.5"
       }
     },
+    "react-dom-factories": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom-factories/-/react-dom-factories-1.0.2.tgz",
+      "integrity": "sha1-63cFxNs2+1AbOqOP91lhaqD/luA="
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-quill": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-1.3.3.tgz",
+      "integrity": "sha512-T9RubLaWJ8gCfp7sOqmFupjiTiEp/EdGqhCG+PWGKc5UHiK6xIWNKWYsOHHEhQ+sZCKs8u/DPx47gc1VfFmcLg==",
+      "requires": {
+        "@types/quill": "1.3.10",
+        "@types/react": "*",
+        "create-react-class": "^15.6.0",
+        "lodash": "^4.17.4",
+        "prop-types": "^15.5.10",
+        "quill": "^1.2.6",
+        "react-dom-factories": "^1.0.0"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -14158,6 +14448,15 @@
         "safe-regex": "^1.1.0"
       }
     },
+    "regexp.prototype.flags": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
+      "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      }
+    },
     "regexpu-core": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
@@ -14716,8 +15015,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
-      "dev": true
     },
     "setprototypeof": {
       "version": "1.1.0",
@@ -14772,7 +15070,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
       },
@@ -14780,8 +15077,7 @@
         "is-arrayish": {
           "version": "0.3.2",
           "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
-          "dev": true
         }
       }
     },
@@ -14953,15 +15249,6 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
-    "sp-pnp-js": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/sp-pnp-js/-/sp-pnp-js-3.0.10.tgz",
-      "integrity": "sha1-Rm180DEgkNbEXTH20azoAgW9QjA=",
-      "requires": {
-        "@microsoft/microsoft-graph-types": "1.1.0",
-        "@types/sharepoint": "2013.1.9"
-      }
-    },
     "sparkles": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
@@ -15234,7 +15521,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
       "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.5"
@@ -15244,7 +15530,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
       "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
-      "dev": true,
       "requires": {
         "define-properties": "^1.1.3",
         "es-abstract": "^1.17.5"
@@ -16023,8 +16308,7 @@
     "ua-parser-js": {
       "version": "0.7.21",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
-      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==",
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
-      "dev": true
     },
     "uglify-js": {
       "version": "3.10.0",

samples/react-adaptive-cards-image-gallery/package.json

@@ -17,6 +17,8 @@
     "@microsoft/sp-office-ui-fabric-core": "1.10.0",
     "@microsoft/sp-property-pane": "1.10.0",
     "@microsoft/sp-webpart-base": "1.10.0",
+    "@pnp/sp": "^2.0.6",
+    "@pnp/spfx-controls-react": "^1.19.0",
     "@types/es6-promise": "0.0.33",
     "@types/react": "16.8.8",
     "@types/react-dom": "16.8.3",
@@ -24,8 +26,7 @@
     "adaptivecards": "^1.1.0",
     "office-ui-fabric-react": "6.189.2",
     "react": "16.8.5",
-    "react-dom": "16.8.5",
+    "react-dom": "16.8.5"
-    "sp-pnp-js": "^3.0.10"
   },
   "resolutions": {
     "@types/react": "16.8.8"

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/AdaptiveCardsImageGalleryWebPart.ts

@@ -7,7 +7,7 @@ import { IPropertyPaneConfiguration, PropertyPaneTextField } from "@microsoft/sp
 import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings';
 import AdaptiveCardsImageGallery from './components/AdaptiveCardsImageGallery';
 import { IAdaptiveCardsImageGalleryProps } from './components/IAdaptiveCardsImageGalleryProps';
-import pnp from 'sp-pnp-js';
+import { sp } from '@pnp/sp/presets/all';
 
 export interface IAdaptiveCardsImageGalleryWebPartProps {
   imageGalleryName: string;
@@ -17,7 +17,8 @@ export interface IAdaptiveCardsImageGalleryWebPartProps {
 export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebPart<IAdaptiveCardsImageGalleryWebPartProps> {
   public async onInit(): Promise<void> {
     return super.onInit().then(_ => {
-      pnp.setup({
+      // Setup context to PnPjs
+      sp.setup({
         spfxContext: this.context
       });
     });
@@ -27,6 +28,7 @@ export default class AdaptiveCardsImageGalleryWebPart extends BaseClientSideWebP
     const element: React.ReactElement<IAdaptiveCardsImageGalleryProps > = React.createElement(
       AdaptiveCardsImageGallery,
       {
+        context: this.context,
         serviceScope: this.context.serviceScope,
         imageGalleryName: this.properties.imageGalleryName || "Adaptive Card Images",
         imagesToDisplay: this.properties.imagesToDisplay || 10

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/AdaptiveCardsImageGallery.tsx

@@ -1,36 +1,40 @@
 import * as React from 'react';
 import styles from './AdaptiveCardsImageGallery.module.scss';
+import * as strings from 'AdaptiveCardsImageGalleryWebPartStrings';
 import { IAdaptiveCardsImageGalleryProps } from './IAdaptiveCardsImageGalleryProps';
 import { IAdaptiveCardsImageGalleryState } from './IAdaptiveCardsImageGalleryState';
-import { escape } from '@microsoft/sp-lodash-subset';
+import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
-
 import * as AdaptiveCards from "adaptivecards";
 import { ImageGalleryService, IImageGalleryService } from '../services/ImageGalleryService';
 import { ServiceScope, Environment, EnvironmentType } from '@microsoft/sp-core-library';
 import { Spinner, SpinnerSize } from 'office-ui-fabric-react/lib/Spinner';
 
 export default class AdaptiveCardsImageGallery extends React.Component<IAdaptiveCardsImageGalleryProps, IAdaptiveCardsImageGalleryState> {
+  // The rendering container
+  private _acContainer: HTMLDivElement;
   private ImageGalleryServiceInstance: IImageGalleryService;
   private _galleryListName: string;
   private _noOfItems: number;
   private card: any;
-  private renderedCard: any = "";
   private imagesJSON = [];
 
   constructor(props: IAdaptiveCardsImageGalleryProps) {
     super(props);
 
     this.state = {
-      galleryItems: null,
+      galleryItems: []
-      isLoading: true,
-      showErrorMessage: false
     };
 
-    let serviceScope: ServiceScope;
-    serviceScope = this.props.serviceScope;
-
     this._galleryListName = this.props.imageGalleryName;
     this._noOfItems = this.props.imagesToDisplay;
+  }
+
+  private _executeActionHandler = (action: AdaptiveCards.Action) => {
+    window.location.href = action.iconUrl;
+  }
+
+  public componentDidMount(): void {
+    let serviceScope: ServiceScope = this.props.serviceScope;
 
     // Based on the type of environment, return the correct instance of the ImageGalleryServiceInstance interface
     if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) {
@@ -39,7 +43,20 @@ export default class AdaptiveCardsImageGallery extends React.Component<IAdaptive
     }
 
     this.ImageGalleryServiceInstance.getGalleryImages(this._galleryListName, this._noOfItems).then((galleryImages: any[]) => {
-      galleryImages.forEach(adaptiveImage => {
+      this.setState({ galleryItems: galleryImages });
+      this.showAdaptiveCard();
+    });
+  }
+
+  public componentWillReceiveProps(nextProps: IAdaptiveCardsImageGalleryProps) {
+    this.ImageGalleryServiceInstance.getGalleryImages(nextProps.imageGalleryName, nextProps.imagesToDisplay).then((galleryImages: any[]) => {
+      this.setState({ galleryItems: galleryImages });
+      this.showAdaptiveCard();
+    });
+  }
+
+  public showAdaptiveCard() {
+    this.state.galleryItems.forEach(adaptiveImage => {
       let image = {};
       image["type"] = "Image";
       image["url"] = adaptiveImage.ImageLink.Url;
@@ -89,22 +106,34 @@ export default class AdaptiveCardsImageGallery extends React.Component<IAdaptive
     // Parse the card
     adaptiveCard.parse(this.card);
 
-      // Render the card to an HTML element
+    // Empty the div so we can replace it
-      this.renderedCard = adaptiveCard.render();
+    while (this._acContainer.firstChild) {
-      this.setState({ isLoading: false });
+      this._acContainer.removeChild(this._acContainer.lastChild);
-    });
     }
 
-  private _executeActionHandler = (action: AdaptiveCards.Action) => {
+    // Render the card to an HTML element
-    window.location.href = action.iconUrl;
+    adaptiveCard.render(this._acContainer);
+  }
+
+  private _onConfigure = () => {
+    // Context of the web part
+    this.props.context.propertyPane.open();
   }
 
   public render(): React.ReactElement<IAdaptiveCardsImageGalleryProps> {
     return (
       <div className={styles.adaptiveCardsImageGallery}>
         <div className={styles.container}>
-          {this.state.isLoading && <Spinner className={styles.spinner} size={SpinnerSize.large} />}
+          {
-          {!this.state.isLoading && <div ref={(n) => { n && n.appendChild(this.renderedCard) }} />}
+            this.state.galleryItems.length == 0 ?
+            <Placeholder iconName='Edit'
+              iconText={strings.ConfigureWebPartLabel}
+              description={strings.ConfigureDescription}
+              buttonLabel={strings.ConfigureLabel}
+              onConfigure={this._onConfigure} />
+              :
+              <div ref={(elm) => { this._acContainer = elm; }}></div>
+          }
         </div>
       </div>
     );

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/IAdaptiveCardsImageGalleryProps.ts

@@ -1,6 +1,8 @@
 import { ServiceScope } from '@microsoft/sp-core-library';
+import { WebPartContext } from "@microsoft/sp-webpart-base";
 
 export interface IAdaptiveCardsImageGalleryProps {
+  context: WebPartContext;
   serviceScope: ServiceScope;
   imageGalleryName: string;
   imagesToDisplay: number;

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/IAdaptiveCardsImageGalleryState.ts

@@ -1,5 +1,3 @@
 export interface IAdaptiveCardsImageGalleryState {
     galleryItems: any[];
-    isLoading: boolean;
-    showErrorMessage: boolean;
 }

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/loc/en-us.js

@@ -5,5 +5,8 @@ define([], function() {
     "DescriptionFieldLabel": "Description Field",
     "ImageGalleryNameFieldLabel": "Image Gallery",
     "ImagesToDisplayFieldLabel": "Number of images to display",
+    "ConfigureWebPartLabel": "Configure your Adaptive cards images",
+    "ConfigureDescription": "Please select the list with Adaptive cards images information",
+    "ConfigureLabel": "Configure"
   }
 });

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/loc/mystrings.d.ts

@@ -3,6 +3,9 @@ declare interface IAdaptiveCardsImageGalleryWebPartStrings {
   BasicGroupName: string;
   ImageGalleryNameFieldLabel: string;
   ImagesToDisplayFieldLabel: string;
+  ConfigureWebPartLabel: string;
+  ConfigureDescription: string;
+  ConfigureLabel: string;
 }
 
 declare module 'AdaptiveCardsImageGalleryWebPartStrings' {

samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/services/ImageGalleryService.ts

@@ -1,7 +1,7 @@
 import { ServiceKey, ServiceScope } from '@microsoft/sp-core-library';
 import { PageContext } from '@microsoft/sp-page-context';
 import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
-import * as pnp from "sp-pnp-js";
+import { sp } from '@pnp/sp/presets/all';
 
 export interface IImageGalleryService {
     getGalleryImages: (listName: string, rowLimit: number) => Promise<any[]>;
@@ -17,38 +17,18 @@ export class ImageGalleryService implements IImageGalleryService {
         });
     }
 
-    public getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
+    public async getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
-        const xml = `<View>
+        try {
-                        <ViewFields>
+            let items: any = await sp.web.lists.getByTitle(listName).items
-                            <FieldRef Name='ID' />
+                .select("Id", "Title", "ImageLink", "NavigationURL")
-                            <FieldRef Name='Title' />
+                .orderBy("SortOrder")
-                            <FieldRef Name='ImageLink' />
+                .top(rowLimit)
-                            <FieldRef Name='NavigationURL' />
+                .get();
-                        </ViewFields>
-                        <Query>
-                            <OrderBy>
-                                <FieldRef Name='SortOrder' />
-                            </OrderBy>
-                        </Query>
-                        <RowLimit>` + rowLimit + `</RowLimit>
-                    </View>`;
 
-        const q: any = {
-            ViewXml: xml,
-        };
-
-        return this._ensureList(listName).then((list) => {
-            if (list) {
-                return pnp.sp.web.lists.getByTitle(listName).getItemsByCAMLQuery(q).then((items: any[]) => {
             return Promise.resolve(items);
-                });
         }
-        });
+        catch (error) {
-    }
+            return Promise.reject(error);
-
-    private _ensureList(listName: string): Promise<pnp.List> {
-        if (listName) {
-            return pnp.sp.web.lists.ensure(listName).then((listEnsureResult) => Promise.resolve(listEnsureResult.list));
         }
     }
 }

samples/react-timeline/README.md

@@ -66,6 +66,7 @@ Below NPM package is used to develop this sample.
 1. @pnp/sp (https://www.npmjs.com/package/@pnp/sp)
 2. @pnp/spfx-controls-react (https://pnp.github.io/sp-dev-fx-controls-react/)
 3. @pnp/spfx-property-controls (https://pnp.github.io/sp-dev-fx-property-controls/)
+4. Moment (https://www.npmjs.com/package/moment)
 
 ## Used SharePoint Framework Version 
 
@@ -102,11 +103,16 @@ Version|Date|Comments
 
 ## Minimal Path to Awesome
 
-- Clone this repo
+- Clone this repository.
+- On the command prompt, navigate to the web part folder and execute:
 - `npm i`
-- `gulp serve --nobrowser`
+- `gulp bundle --ship`
-- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
+- `gulp package-solution --ship`
-- Search and add web part "Timeline"
+- The package can be found at `\react-timeline\sharepoint\solution\react-timeline.sppkg`
+- [Deploy the package](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#deploy-the-helloworld-package-to-app-catalog) to the app catalog.
+- [Install the client-side solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#install-the-client-side-solution-on-your-site) to your SharePoint site.
+- [Add web part to your SharePoint page](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page#add-the-helloworld-web-part-to-modern-page) named "Timeline".
+
 
 ## Features