Updated code and instructions

2020-07-17 12:20:55 +00:00 · 2020-07-17 12:20:55 +00:00 · 23583ef0c0
parent 7727eafd28
commit 23583ef0c0
12 changed files with 500 additions and 187 deletions
--- a/samples/react-adaptive-cards-image-gallery/README.md
+++ b/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`
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
- Search and add web part "Adaptive Cards Image Gallery"
+- `gulp bundle --ship`
+- `gulp package-solution --ship`
+- 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

--- a/samples/react-adaptive-cards-image-gallery/config/config.json
+++ b/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"
  }
-}
+}
--- a/samples/react-adaptive-cards-image-gallery/package-lock.json
+++ b/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=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
    },
    "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=",
-      "dev": true
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
    },
    "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=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
    },
    "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=",
-          "dev": true
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
        }
      }
    },
@ -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==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
+    },
+    "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==",
-      "dev": true
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
    },
    "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=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
    },
    "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==",
-          "dev": true
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
        }
      }
    },
@ -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==",
-      "dev": true
+      "integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
    },
    "uglify-js": {
      "version": "3.10.0",
--- a/samples/react-adaptive-cards-image-gallery/package.json
+++ b/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",
-    "sp-pnp-js": "^3.0.10"
+    "react-dom": "16.8.5"
  },
  "resolutions": {
    "@types/react": "16.8.8"
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/AdaptiveCardsImageGalleryWebPart.ts
+++ b/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
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/AdaptiveCardsImageGallery.tsx
+++ b/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,
-      isLoading: true,
-      showErrorMessage: false
+      galleryItems: []
    };

-    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,72 +43,97 @@ export default class AdaptiveCardsImageGallery extends React.Component<IAdaptive
    }

    this.ImageGalleryServiceInstance.getGalleryImages(this._galleryListName, this._noOfItems).then((galleryImages: any[]) => {
-      galleryImages.forEach(adaptiveImage => {
-        let image = {};
-        image["type"] = "Image";
-        image["url"] = adaptiveImage.ImageLink.Url;        
-
-        // Compose image action
-        let imageAction = {};
-        imageAction["title"] = adaptiveImage.NavigationURL.Description;
-        imageAction["type"] = "Action.OpenUrl";
-        imageAction["url"] = adaptiveImage.NavigationURL.Url;
-        imageAction["iconUrl"] = adaptiveImage.NavigationURL.Url;
-
-        image["selectAction"] = imageAction;
-        this.imagesJSON.push(image);
-      });
-
-      this.card = {
-        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
-        "type": "AdaptiveCard",
-        "version": "1.0",
-        "body": [
-          {
-            "type": "TextBlock",
-            "text": "Adaptive Image Gallery",
-            "size": "medium"
-          },
-          {
-            "type": "ImageSet",
-            "imageSize": "medium",
-            "images": this.imagesJSON
-          }
-        ]
-      };
-
-      // Create an AdaptiveCard instance
-      var adaptiveCard = new AdaptiveCards.AdaptiveCard();
-
-      // Set its hostConfig property unless you want to use the default Host Config
-      // Host Config defines the style and behavior of a card
-      adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
-        fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
-      });
-
-      // Set the adaptive card's event handlers. onExecuteAction is invoked
-      // whenever an action is clicked in the card
-      adaptiveCard.onExecuteAction = this._executeActionHandler;
-
-      // Parse the card
-      adaptiveCard.parse(this.card);
-
-      // Render the card to an HTML element
-      this.renderedCard = adaptiveCard.render();
-      this.setState({ isLoading: false });
+      this.setState({ galleryItems: galleryImages });
+      this.showAdaptiveCard();
    });
  }

-  private _executeActionHandler = (action: AdaptiveCards.Action) => {
-    window.location.href = action.iconUrl;
+  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;
+
+      // Compose image action
+      let imageAction = {};
+      imageAction["title"] = adaptiveImage.NavigationURL.Description;
+      imageAction["type"] = "Action.OpenUrl";
+      imageAction["url"] = adaptiveImage.NavigationURL.Url;
+      imageAction["iconUrl"] = adaptiveImage.NavigationURL.Url;
+
+      image["selectAction"] = imageAction;
+      this.imagesJSON.push(image);
+    });
+
+    this.card = {
+      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+      "type": "AdaptiveCard",
+      "version": "1.0",
+      "body": [
+        {
+          "type": "TextBlock",
+          "text": "Adaptive Image Gallery",
+          "size": "medium"
+        },
+        {
+          "type": "ImageSet",
+          "imageSize": "medium",
+          "images": this.imagesJSON
+        }
+      ]
+    };
+
+    // Create an AdaptiveCard instance
+    var adaptiveCard = new AdaptiveCards.AdaptiveCard();
+
+    // Set its hostConfig property unless you want to use the default Host Config
+    // Host Config defines the style and behavior of a card
+    adaptiveCard.hostConfig = new AdaptiveCards.HostConfig({
+      fontFamily: "Segoe UI, Helvetica Neue, sans-serif"
+    });
+
+    // Set the adaptive card's event handlers. onExecuteAction is invoked
+    // whenever an action is clicked in the card
+    adaptiveCard.onExecuteAction = this._executeActionHandler;
+
+    // Parse the card
+    adaptiveCard.parse(this.card);
+
+    // Empty the div so we can replace it
+    while (this._acContainer.firstChild) {
+      this._acContainer.removeChild(this._acContainer.lastChild);
+    }
+
+    // Render the card to an HTML element
+    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>
    );
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/IAdaptiveCardsImageGalleryProps.ts
+++ b/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;
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/components/IAdaptiveCardsImageGalleryState.ts
+++ b/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;
 }
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/loc/en-us.js
+++ b/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"
  }
 });
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/loc/mystrings.d.ts
+++ b/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' {
--- a/samples/react-adaptive-cards-image-gallery/src/webparts/adaptiveCardsImageGallery/services/ImageGalleryService.ts
+++ b/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[]>;
@ -9,7 +9,7 @@ export interface IImageGalleryService {

 export class ImageGalleryService implements IImageGalleryService {
    public static readonly serviceKey: ServiceKey<IImageGalleryService> = ServiceKey.create<IImageGalleryService>('ImageGallery:ImageGalleryService', ImageGalleryService);
-    private _pageContext: PageContext;    
+    private _pageContext: PageContext;

    constructor(serviceScope: ServiceScope) {
        serviceScope.whenFinished(() => {
@ -17,38 +17,18 @@ export class ImageGalleryService implements IImageGalleryService {
        });
    }

-    public getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
-        const xml = `<View>
-                        <ViewFields>
-                            <FieldRef Name='ID' />
-                            <FieldRef Name='Title' />
-                            <FieldRef Name='ImageLink' />
-                            <FieldRef Name='NavigationURL' />
-                        </ViewFields>
-                        <Query>
-                            <OrderBy>
-                                <FieldRef Name='SortOrder' />
-                            </OrderBy>
-                        </Query>
-                        <RowLimit>` + rowLimit + `</RowLimit>
-                    </View>`;
+    public async getGalleryImages(listName: string, rowLimit: number): Promise<any[]> {
+        try {
+            let items: any = await sp.web.lists.getByTitle(listName).items
+                .select("Id", "Title", "ImageLink", "NavigationURL")
+                .orderBy("SortOrder")
+                .top(rowLimit)
+                .get();

-        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);
-                });
-            }
-        });
-    }
-
-    private _ensureList(listName: string): Promise<pnp.List> {
-        if (listName) {
-            return pnp.sp.web.lists.ensure(listName).then((listEnsureResult) => Promise.resolve(listEnsureResult.list));
+            return Promise.resolve(items);
+        }
+        catch (error) {
+            return Promise.reject(error);
        }
    }
 }
--- a/samples/react-timeline/README.md
+++ b/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`
- Open workbench on your tenant, i.e. https://contoso.sharepoint.com/sites/salesteam/_layouts/15/workbench.aspx
- Search and add web part "Timeline"
+- `gulp bundle --ship`
+- `gulp package-solution --ship`
+- 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