Upgrade react accordion to SPFx 1.10

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

@@ -1,11 +1,12 @@
 {
   "@microsoft/generator-sharepoint": {
     "isCreatingSolution": true,
+    "isDomainIsolated": false,
     "environment": "spo",
-    "version": "1.5.1",
+    "version": "1.10.0",
     "libraryName": "react-accordion",
     "libraryId": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
     "packageManager": "npm",
     "componentType": "webpart"
   }
-}
+}

samples/react-accordion/README.md

@@ -7,7 +7,7 @@ This is a sample web Part that illustrates the use of React Accessible Accordion
 ![Sample Web Part built using SPFx with React Framework showing list data in accordion format](./assets/previewAccordion.PNG)
 
 ## Used SharePoint Framework Version 
-![drop](https://img.shields.io/badge/drop-1.5.1-green.svg)
+![drop](https://img.shields.io/badge/drop-1.10.0-green.svg)
 
 ## Applies to
 
@@ -25,6 +25,7 @@ react-accordion | Gautam Sheth (SharePoint Consultant, RapidCircle)
 Version|Date|Comments
 -------|----|--------
 1.0|August 17, 2018|Initial release
+2.0|January 19, 2020|Upgrade to SPFx 1.10
 
 ## Disclaimer
 **THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
@@ -33,18 +34,29 @@ Version|Date|Comments
 
 ## Minimal Path to Awesome
 
-- clone this repo
+### Build and Test
-- in the command line run:
-  - `npm i`
-  - `gulp serve --nobrowser`
-- in your SharePoint Site create a custom list named FAQ 
-- in the FAQ list, create a column Description(internal name) of type Enhanced rich text
-- add some list items with Title and Description values
 
-- navigate to the hosted version of SharePoint workbench, eg. **https://contoso.sharepoint.com/sites/test/_layouts/15/workbench.aspx**
+1. Clone this repo
-- add the Web Part to canvas and in its configuration specify:
+2. In the command line run
-- name of the list where list items are stored, eg. **FAQ**
+    - `npm i`
+    - `gulp build`
+    - `gulp serve --nobrowser`
+3. Create a custom list (e.g. FAQ) with Title and Description(internal name) of type Enhanced rich text on your SharePoint site. 
+4. Populate the list with some items
+5. Navigate to the hosted version of SharePoint workbench, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>/_layouts/15/workbench.aspx**
+6. Add the Web Part to the canvas and configure it.
 
+### Package and deploy
+
+1. In the command line run
+    - `gulp bundle --ship`
+    - `gulp package-solution --ship`
+2. Install into your SharePoint app catalog and add it to a SharePoint site.
+3. Navigate to your site, eg. **https://\<tenant>.sharepoint.com/sites/\<your site>**
+4. Create a custom list with Title and Description(internal name) of type Enhanced rich text. 
+5. Populate the list with some items
+6. Navigate to a page on your site where the custom list is created
+7. Add the Web Part to the page and configure it.
 
 ## Features
 
@@ -52,13 +64,14 @@ This project contains sample client-side web part built on the SharePoint Framew
 
 This sample illustrates the following concepts on top of the SharePoint Framework:
 
-- general
+### General
-  - performing SharePoint GET operation in React using inbuilt SP Http Client
+
-  - Using Fabric UI button component for pagination      
+- performing SharePoint GET operation in React using inbuilt SP Http Client
-  - optimizing REST responses for performance using nometadata option of JSON light
+- Using Fabric UI button component for pagination      
-  - using PnP Webpart title control of @pnp/spfx-controls-react library
+- optimizing REST responses for performance using nometadata option of JSON light
-  - showing SharePoint list data in Accordion format using React Accessible Accordion plugin
+- using PnP Webpart title control of @pnp/spfx-controls-react library
-  - searching in the fetched data by making use of Search Box from Office Fabric UI
+- showing SharePoint list data in Accordion format using React Accessible Accordion plugin
+- searching in the fetched data by making use of Search Box from Office Fabric UI
 
 
 <img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-accordion" />

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

@@ -4,7 +4,8 @@
     "name": "react-accordion-client-side-solution",
     "id": "6d6cf05b-cfe5-4d12-af19-19ec3aedcaf9",
     "version": "1.0.0.0",
-    "includeClientSideAssets": true
+    "includeClientSideAssets": true,
+    "isDomainIsolated": false
   },
   "paths": {
     "zippedPackage": "solution/react-accordion.sppkg"

samples/react-accordion/config/tslint.json

@@ -1,45 +0,0 @@
-{
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/tslint.schema.json",
-  // Display errors as warnings
-  "displayAsWarning": true,
-  // The TSLint task may have been configured with several custom lint rules
-  // before this config file is read (for example lint rules from the tslint-microsoft-contrib
-  // project). If true, this flag will deactivate any of these rules.
-  "removeExistingRules": true,
-  // When true, the TSLint task is configured with some default TSLint "rules.":
-  "useDefaultConfigAsBase": false,
-  // Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
-  // which are active, other than the list of rules below.
-  "lintConfig": {
-    // Opt-in to Lint rules which help to eliminate bugs in JavaScript
-    "rules": {
-      "class-name": false,
-      "export-name": false,
-      "forin": false,
-      "label-position": false,
-      "member-access": true,
-      "no-arg": false,
-      "no-console": false,
-      "no-construct": false,
-      "no-duplicate-case": true,
-      "no-duplicate-variable": true,
-      "no-eval": false,
-      "no-function-expression": true,
-      "no-internal-module": true,
-      "no-shadowed-variable": true,
-      "no-switch-case-fall-through": true,
-      "no-unnecessary-semicolons": true,
-      "no-unused-expression": true,
-      "no-use-before-declare": true,
-      "no-with-statement": true,
-      "semicolon": true,
-      "trailing-comma": false,
-      "typedef": false,
-      "typedef-whitespace": false,
-      "use-named-parameter": true,
-      "valid-typeof": true,
-      "variable-name": false,
-      "whitespace": false
-    }
-  }
-}

samples/react-accordion/package.json

@@ -2,6 +2,7 @@
   "name": "react-accordion",
   "version": "0.0.1",
   "private": true,
+  "main": "lib/index.js",
   "engines": {
     "node": ">=0.10.0"
   },
@@ -11,26 +12,33 @@
     "test": "gulp test"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.5.1",
+    "@microsoft/sp-core-library": "1.10.0",
-    "@microsoft/sp-lodash-subset": "1.5.1",
+    "@microsoft/sp-lodash-subset": "1.10.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.5.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
-    "@microsoft/sp-webpart-base": "1.5.1",
+    "@microsoft/sp-property-pane": "1.10.0",
+    "@microsoft/sp-webpart-base": "1.10.0",
     "@pnp/spfx-controls-react": "1.7.0",
     "@types/es6-promise": "0.0.33",
-    "@types/react": "15.6.6",
+    "@types/react": "16.8.8",
-    "@types/react-dom": "15.5.6",
+    "@types/react-dom": "16.8.3",
     "@types/webpack-env": "1.13.1",
-    "react": "15.6.2",
+    "office-ui-fabric-react": "6.189.2",
+    "react": "16.8.5",
     "react-accessible-accordion": "1.0.2",
-    "react-dom": "15.6.2"
+    "react-dom": "16.8.5"
+  },
+  "resolutions": {
+    "@types/react": "16.8.8"
   },
   "devDependencies": {
-    "@microsoft/sp-build-web": "1.5.1",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-module-interfaces": "1.5.1",
+    "@microsoft/sp-build-web": "1.10.0",
-    "@microsoft/sp-webpart-workbench": "1.5.1",
+    "@microsoft/sp-module-interfaces": "1.10.0",
-    "gulp": "~3.9.1",
+    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.10.0",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
-    "ajv": "~5.2.2"
+    "ajv": "~5.2.2",
+    "gulp": "~3.9.1"
   }
 }

samples/react-accordion/src/index.ts

@@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler

samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.manifest.json

@@ -10,6 +10,9 @@
   // Components that allow authors to embed arbitrary script code should set this to true.
   // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
   "requiresCustomScript": false,
+  "supportedHosts": [
+    "SharePointWebPart"
+  ],
   "preconfiguredEntries": [
     {
       "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
@@ -30,4 +33,4 @@
       }
     }
   ]
-}
+}

samples/react-accordion/src/webparts/reactAccordion/ReactAccordionWebPart.ts

@@ -1,12 +1,8 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version, DisplayMode } from '@microsoft/sp-core-library';
-import {
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
-  BaseClientSideWebPart,
+import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
-  IPropertyPaneConfiguration,
-  PropertyPaneTextField,
-  PropertyPaneSlider
-} from '@microsoft/sp-webpart-base';
 
 import * as strings from 'ReactAccordionWebPartStrings';
 import ReactAccordion from './components/ReactAccordion';

samples/react-accordion/src/webparts/reactAccordion/components/IReactAccordionProps.ts

@@ -5,8 +5,8 @@ export interface IReactAccordionProps {
   listName: string;
   spHttpClient: SPHttpClient;
   siteUrl: string;
-  title: string,
+  title: string;
-  displayMode: DisplayMode,
+  displayMode: DisplayMode;
-  maxItemsPerPage: number,
+  maxItemsPerPage: number;
   updateProperty: (value: string) => void;
 }

samples/react-accordion/src/webparts/reactAccordion/components/ReactAccordion.module.scss

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .reactAccordion {
   .container {
@@ -70,4 +70,4 @@
       display: inline-block;
     }
   }
-}
+}

samples/react-accordion/tsconfig.json

@@ -1,14 +1,19 @@
 {
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
     "module": "esnext",
     "moduleResolution": "node",
+    "noUnusedLocals": false,
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
     "experimentalDecorators": true,
     "skipLibCheck": true,
+    "strictNullChecks": false,
+    "outDir": "lib",
     "typeRoots": [
       "./node_modules/@types",
       "./node_modules/@microsoft"
@@ -22,5 +27,12 @@
       "dom",
       "es2015.collection"
     ]
-  }
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
 }

samples/react-accordion/tslint.json

@@ -1,3 +1,30 @@
 {
-    "rulesDirectory": "./config"
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json",
-}
+  "rules": {
+    "class-name": false,
+    "export-name": false,
+    "forin": false,
+    "label-position": false,
+    "member-access": true,
+    "no-arg": false,
+    "no-console": false,
+    "no-construct": false,
+    "no-duplicate-variable": true,
+    "no-eval": false,
+    "no-function-expression": true,
+    "no-internal-module": true,
+    "no-shadowed-variable": true,
+    "no-switch-case-fall-through": true,
+    "no-unnecessary-semicolons": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
+}

samples/react-accordion/upgrade-1_10-report.md

@@ -0,0 +1,844 @@
+# Upgrade project C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion to v1.10.0
+
+Date: 1/18/2020
+
+## Findings
+
+Following is the list of steps required to upgrade your project to SharePoint Framework version 1.10.0. [Summary](#Summary) of the modifications is included at the end of the report.
+
+### FN001001 @microsoft/sp-core-library | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-core-library
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-core-library@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001002 @microsoft/sp-lodash-subset | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-lodash-subset
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-lodash-subset@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001003 @microsoft/sp-office-ui-fabric-core | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-office-ui-fabric-core
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-office-ui-fabric-core@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001004 @microsoft/sp-webpart-base | Required
+
+Upgrade SharePoint Framework dependency package @microsoft/sp-webpart-base
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-webpart-base@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN001021 @microsoft/sp-property-pane | Required
+
+Install SharePoint Framework dependency package @microsoft/sp-property-pane
+
+Execute the following command:
+
+```sh
+npm i -SE @microsoft/sp-property-pane@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002001 @microsoft/sp-build-web | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-build-web
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-build-web@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002002 @microsoft/sp-module-interfaces | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-module-interfaces
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-module-interfaces@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002003 @microsoft/sp-webpart-workbench | Required
+
+Upgrade SharePoint Framework dev dependency package @microsoft/sp-webpart-workbench
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-webpart-workbench@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002009 @microsoft/sp-tslint-rules | Required
+
+Install SharePoint Framework dev dependency package @microsoft/sp-tslint-rules
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/sp-tslint-rules@1.10.0
+```
+
+File: [./package.json](./package.json)
+
+### FN002012 @microsoft/rush-stack-compiler-3.3 | Required
+
+Install SharePoint Framework dev dependency package @microsoft/rush-stack-compiler-3.3
+
+Execute the following command:
+
+```sh
+npm i -DE @microsoft/rush-stack-compiler-3.3@0.3.5
+```
+
+File: [./package.json](./package.json)
+
+### FN010001 .yo-rc.json version | Recommended
+
+Update version in .yo-rc.json
+
+In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.10.0"
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.json)
+
+### FN012017 tsconfig.json extends property | Required
+
+Update tsconfig.json extends property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN016004 Property pane property import change to @microsoft/sp-property-pane | Required
+
+Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package
+
+In file [src\webparts\reactAccordion\ReactAccordionWebPart.ts](src\webparts\reactAccordion\ReactAccordionWebPart.ts) update the code as follows:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
+```
+
+File: [src\webparts\reactAccordion\ReactAccordionWebPart.ts:4:1](src\webparts\reactAccordion\ReactAccordionWebPart.ts)
+
+### FN001005 @types/react | Required
+
+Upgrade SharePoint Framework dependency package @types/react
+
+Execute the following command:
+
+```sh
+npm i -SE @types/react@16.8.8
+```
+
+File: [./package.json](./package.json)
+
+### FN001006 @types/react-dom | Required
+
+Upgrade SharePoint Framework dependency package @types/react-dom
+
+Execute the following command:
+
+```sh
+npm i -SE @types/react-dom@16.8.3
+```
+
+File: [./package.json](./package.json)
+
+### FN001022 office-ui-fabric-react | Required
+
+Install SharePoint Framework dependency package office-ui-fabric-react
+
+Execute the following command:
+
+```sh
+npm i -SE office-ui-fabric-react@6.189.2
+```
+
+File: [./package.json](./package.json)
+
+### FN020001 @types/react | Required
+
+Add resolution for package @types/react
+
+In file [./package.json](./package.json) update the code as follows:
+
+```json
+{
+  "resolutions": {
+    "@types/react": "16.8.8"
+  }
+}
+```
+
+File: [./package.json](./package.json)
+
+### FN021001 main | Required
+
+Add package.json property
+
+In file [./package.json](./package.json) update the code as follows:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+File: [./package.json](./package.json)
+
+### FN001008 react | Required
+
+Upgrade SharePoint Framework dependency package react
+
+Execute the following command:
+
+```sh
+npm i -SE react@16.8.5
+```
+
+File: [./package.json](./package.json)
+
+### FN001009 react-dom | Required
+
+Upgrade SharePoint Framework dependency package react-dom
+
+Execute the following command:
+
+```sh
+npm i -SE react-dom@16.8.5
+```
+
+File: [./package.json](./package.json)
+
+### FN022001 Scss file import | Required
+
+Remove scss file import
+
+In file [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss) update the code as follows:
+
+```scss
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
+```
+
+File: [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
+
+### FN022002 Scss file import | Optional
+
+Add scss file import
+
+In file [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss) update the code as follows:
+
+```scss
+@import '~office-ui-fabric-react/dist/sass/References.scss'
+```
+
+File: [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
+
+### FN011011 Web part manifest supportedHosts | Required
+
+Update the supportedHosts property in the manifest
+
+In file [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json) update the code as follows:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```
+
+File: [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json)
+
+### FN012014 tsconfig.json compiler options inlineSources | Required
+
+Update tsconfig.json inlineSources value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "inlineSources": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012015 tsconfig.json compiler options strictNullChecks | Required
+
+Update tsconfig.json strictNullChecks value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012016 tsconfig.json compiler options noUnusedLocals | Required
+
+Update tsconfig.json noUnusedLocals value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "noUnusedLocals": false
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN006003 package-solution.json isDomainIsolated | Required
+
+Update package-solution.json isDomainIsolated
+
+In file [./config/package-solution.json](./config/package-solution.json) update the code as follows:
+
+```json
+{
+  "solution": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+File: [./config/package-solution.json](./config/package-solution.json)
+
+### FN010007 .yo-rc.json isDomainIsolated | Recommended
+
+Update isDomainIsolated in .yo-rc.json
+
+In file [./.yo-rc.json](./.yo-rc.json) update the code as follows:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+File: [./.yo-rc.json](./.yo-rc.json)
+
+### FN018001 Web part Microsoft Teams tab resources folder | Optional
+
+Create folder for Microsoft Teams tab resources
+
+Execute the following command:
+
+```sh
+mkdir C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion/teams_reactAccordion
+```
+
+File: [teams_reactAccordion](teams_reactAccordion)
+
+### FN018002 Web part Microsoft Teams tab manifest | Optional
+
+Create Microsoft Teams tab manifest for the web part
+
+Execute the following command:
+
+```sh
+cat > C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\manifest.json << EOF 
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.2",
+  "packageName": "React Accordion App",
+  "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
+  "version": "0.1",
+  "developer": {
+    "name": "SPFx + Teams Dev",
+    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+  },
+  "name": {
+    "short": "React Accordion App"
+  },
+  "description": {
+    "short": "SPFx webpart which shows SharePoint list data in Accordion format",
+    "full": "SPFx webpart which shows SharePoint list data in Accordion format"
+  },
+  "icons": {
+    "outline": "tab20x20.png",
+    "color": "tab96x96.png"
+  },
+  "accentColor": "#004578",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=97a28c00-64ee-4ec7-b373-723e39069a96",
+      "canUpdateConfiguration": true,
+      "scopes": [
+        "team"
+      ]
+    }
+  ],
+  "validDomains": [
+    "*.login.microsoftonline.com",
+    "*.sharepoint.com",
+    "*.sharepoint-df.com",
+    "spoppe-a.akamaihd.net",
+    "spoprod-a.akamaihd.net",
+    "resourceseng.blob.core.windows.net",
+    "msft.spoppe.com"
+  ],
+  "webApplicationInfo": {
+    "resource": "https://{teamSiteDomain}",
+    "id": "00000003-0000-0ff1-ce00-000000000000"
+  }
+}
+EOF
+```
+
+File: [teams_reactAccordion\manifest.json](teams_reactAccordion\manifest.json)
+
+### FN018003 Web part Microsoft Teams tab small icon | Optional
+
+Create Microsoft Teams tab small icon for the web part
+
+Execute the following command:
+
+```sh
+cp C:\Users\Admin\AppData\Roaming\npm\node_modules\@pnp\office365-cli\dist\o365\spfx\commands\project\project-upgrade\assets\tab20x20.png C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\tab20x20.png
+```
+
+File: [teams_reactAccordion\tab20x20.png](teams_reactAccordion\tab20x20.png)
+
+### FN018004 Web part Microsoft Teams tab large icon | Optional
+
+Create Microsoft Teams tab large icon for the web part
+
+Execute the following command:
+
+```sh
+cp C:\Users\Admin\AppData\Roaming\npm\node_modules\@pnp\office365-cli\dist\o365\spfx\commands\project\project-upgrade\assets\tab96x96.png C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams_reactAccordion\tab96x96.png
+```
+
+File: [teams_reactAccordion\tab96x96.png](teams_reactAccordion\tab96x96.png)
+
+### FN019001 tslint.json rulesDirectory | Required
+
+Remove rulesDirectory from tslint.json
+
+In file [./tslint.json](./tslint.json) update the code as follows:
+
+```json
+{
+  "rulesDirectory": []
+}
+```
+
+File: [./tslint.json](./tslint.json)
+
+### FN019002 tslint.json extends | Required
+
+Update tslint.json extends property
+
+In file [./tslint.json](./tslint.json) update the code as follows:
+
+```json
+{
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json"
+}
+```
+
+File: [./tslint.json](./tslint.json)
+
+### FN002008 tslint-microsoft-contrib | Required
+
+Install SharePoint Framework dev dependency package tslint-microsoft-contrib
+
+Execute the following command:
+
+```sh
+npm i -DE tslint-microsoft-contrib@5.0.0
+```
+
+File: [./package.json](./package.json)
+
+### FN012011 tsconfig.json compiler options outDir | Required
+
+Update tsconfig.json outDir value
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "compilerOptions": {
+    "outDir": "lib"
+  }
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012012 tsconfig.json include property | Required
+
+Update tsconfig.json include property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "include": [
+    "src/**/*.ts"
+  ]
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN012013 tsconfig.json exclude property | Required
+
+Update tsconfig.json exclude property
+
+In file [./tsconfig.json](./tsconfig.json) update the code as follows:
+
+```json
+{
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}
+```
+
+File: [./tsconfig.json](./tsconfig.json)
+
+### FN015004 config\tslint.json | Required
+
+Remove file config\tslint.json
+
+Execute the following command:
+
+```sh
+rm config\tslint.json
+```
+
+File: [config\tslint.json](config\tslint.json)
+
+### FN015005 src\index.ts | Required
+
+Add file src\index.ts
+
+Execute the following command:
+
+```sh
+cat > src\index.ts << EOF 
+// A file is required to be in the root of the /src directory by the TypeScript compiler
+
+EOF
+```
+
+File: [src\index.ts](src\index.ts)
+
+### FN017001 Run npm dedupe | Optional
+
+If, after upgrading npm packages, when building the project you have errors similar to: "error TS2345: Argument of type 'SPHttpClientConfiguration' is not assignable to parameter of type 'SPHttpClientConfiguration'", try running 'npm dedupe' to cleanup npm packages.
+
+Execute the following command:
+
+```sh
+npm dedupe
+```
+
+File: [./package.json](./package.json)
+
+## Summary
+
+### Execute script
+
+```sh
+npm i -SE @microsoft/sp-core-library@1.10.0 @microsoft/sp-lodash-subset@1.10.0 @microsoft/sp-office-ui-fabric-core@1.10.0 @microsoft/sp-webpart-base@1.10.0 @microsoft/sp-property-pane@1.10.0 @types/react@16.8.8 @types/react-dom@16.8.3 office-ui-fabric-react@6.189.2 react@16.8.5 react-dom@16.8.5
+npm i -DE @microsoft/sp-build-web@1.10.0 @microsoft/sp-module-interfaces@1.10.0 @microsoft/sp-webpart-workbench@1.10.0 @microsoft/sp-tslint-rules@1.10.0 @microsoft/rush-stack-compiler-3.3@0.3.5 tslint-microsoft-contrib@5.0.0
+mkdir C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams
+cat > C:\Projects\Muges01\sp-dev-fx-webparts\samples\react-accordion\teams\manifest.json << EOF 
+{
+  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.2/MicrosoftTeams.schema.json",
+  "manifestVersion": "1.2",
+  "packageName": "React Accordion App",
+  "id": "97a28c00-64ee-4ec7-b373-723e39069a96",
+  "version": "0.1",
+  "developer": {
+    "name": "SPFx + Teams Dev",
+    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
+    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
+    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
+  },
+  "name": {
+    "short": "React Accordion App"
+  },
+  "description": {
+    "short": "SPFx webpart which shows SharePoint list data in Accordion format",
+    "full": "SPFx webpart which shows SharePoint list data in Accordion format"
+  },
+  "icons": {
+    "outline": "tab20x20.png",
+    "color": "tab96x96.png"
+  },
+  "accentColor": "#004578",
+  "configurableTabs": [
+    {
+      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId=97a28c00-64ee-4ec7-b373-723e39069a96",
+      "canUpdateConfiguration": true,
+      "scopes": [
+        "team"
+      ]
+    }
+  ],
+  "validDomains": [
+    "*.login.microsoftonline.com",
+    "*.sharepoint.com",
+    "*.sharepoint-df.com",
+    "spoppe-a.akamaihd.net",
+    "spoprod-a.akamaihd.net",
+    "resourceseng.blob.core.windows.net",
+    "msft.spoppe.com"
+  ],
+  "webApplicationInfo": {
+    "resource": "https://{teamSiteDomain}",
+    "id": "00000003-0000-0ff1-ce00-000000000000"
+  }
+}
+EOF
+rm config\tslint.json
+cat > src\index.ts << EOF 
+// A file is required to be in the root of the /src directory by the TypeScript compiler
+
+EOF
+```
+
+### Modify files
+
+#### [./.yo-rc.json](./.yo-rc.json)
+
+Update version in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "version": "1.10.0"
+  }
+}
+```
+
+Update isDomainIsolated in .yo-rc.json:
+
+```json
+{
+  "@microsoft/generator-sharepoint": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+#### [./tsconfig.json](./tsconfig.json)
+
+Update tsconfig.json extends property:
+
+```json
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json"
+}
+```
+
+Update tsconfig.json inlineSources value:
+
+```json
+{
+  "compilerOptions": {
+    "inlineSources": false
+  }
+}
+```
+
+Update tsconfig.json strictNullChecks value:
+
+```json
+{
+  "compilerOptions": {
+    "strictNullChecks": false
+  }
+}
+```
+
+Update tsconfig.json noUnusedLocals value:
+
+```json
+{
+  "compilerOptions": {
+    "noUnusedLocals": false
+  }
+}
+```
+
+Update tsconfig.json outDir value:
+
+```json
+{
+  "compilerOptions": {
+    "outDir": "lib"
+  }
+}
+```
+
+Update tsconfig.json include property:
+
+```json
+{
+  "include": [
+    "src/**/*.ts"
+  ]
+}
+```
+
+Update tsconfig.json exclude property:
+
+```json
+{
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}
+```
+
+#### [src\webparts\reactAccordion\ReactAccordionWebPart.ts](src\webparts\reactAccordion\ReactAccordionWebPart.ts)
+
+Refactor the code to import property pane property from the @microsoft/sp-property-pane npm package instead of the @microsoft/sp-webpart-base package:
+
+```ts
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { IPropertyPaneConfiguration, PropertyPaneSlider, PropertyPaneTextField } from "@microsoft/sp-property-pane";
+```
+
+#### [./package.json](./package.json)
+
+Add resolution for package @types/react:
+
+```json
+{
+  "resolutions": {
+    "@types/react": "16.8.8"
+  }
+}
+```
+
+Add package.json property:
+
+```json
+{
+  "main": "lib/index.js"
+}
+```
+
+#### [src\webparts\reactAccordion\components\ReactAccordion.module.scss](src\webparts\reactAccordion\components\ReactAccordion.module.scss)
+
+Remove scss file import:
+
+```scss
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss'
+```
+
+Add scss file import:
+
+```scss
+@import '~office-ui-fabric-react/dist/sass/References.scss'
+```
+
+#### [src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json](src\webparts\reactAccordion\ReactAccordionWebPart.manifest.json)
+
+Update the supportedHosts property in the manifest:
+
+```json
+{
+  "supportedHosts": ["SharePointWebPart"]
+}
+```
+
+#### [./config/package-solution.json](./config/package-solution.json)
+
+Update package-solution.json isDomainIsolated:
+
+```json
+{
+  "solution": {
+    "isDomainIsolated": false
+  }
+}
+```
+
+#### [./tslint.json](./tslint.json)
+
+Remove rulesDirectory from tslint.json:
+
+```json
+{
+  "rulesDirectory": []
+}
+```
+
+Update tslint.json extends property:
+
+```json
+{
+  "extends": "@microsoft/sp-tslint-rules/base-tslint.json"
+}
+```