Merge pull request #1608 from joaojmendes/react-list-menu-documents

2020-11-22 14:12:15 -05:00 · 2020-11-22 14:12:15 -05:00 · 9ec2be1bc0
parent 6296d15b6d 23293d8dfa
commit 9ec2be1bc0
48 changed files with 25735 additions and 0 deletions
--- a/samples/react-list-items-menu/.editorconfig
+++ b/samples/react-list-items-menu/.editorconfig
@ -0,0 +1,25 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# we recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[{package,bower}.json]
+indent_style = space
+indent_size = 2
--- a/samples/react-list-items-menu/.gitignore
+++ b/samples/react-list-items-menu/.gitignore
@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Build generated files
+dist
+lib
+solution
+temp
+*.sppkg
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# OSX
+.DS_Store
+
+# Visual Studio files
+.ntvs_analysis.dat
+.vs
+bin
+obj
+
+# Resx Generated Code
+*.resx.ts
+
+# Styles Generated Code
+*.scss.ts
+*.scss.d.ts
--- a/samples/react-list-items-menu/.yo-rc.json
+++ b/samples/react-list-items-menu/.yo-rc.json
@ -0,0 +1,34 @@
+{
+  "@pnp/generator-spfx": {
+    "framework": "react",
+    "pnpFramework": "reactjs.plus",
+    "pnp-libraries": [
+      "jquery@3",
+      "msgraph",
+      "@pnp/pnpjs",
+      "@pnp/spfx-property-controls",
+      "spfx-uifabric-themes",
+      "lodash",
+      "@pnp/spfx-controls-react",
+      "ouifr@7",
+      "rush@3.7"
+    ],
+    "pnp-ci": "azure-preview",
+    "pnp-vetting": [],
+    "spfxenv": "spo",
+    "pnp-testing": [
+      "jest"
+    ]
+  },
+  "@microsoft/generator-sharepoint": {
+    "environment": "spo",
+    "framework": "react",
+    "isCreatingSolution": true,
+    "version": "1.11.0",
+    "libraryName": "react-list-items-menu",
+    "libraryId": "8b4a758d-a968-4e7c-a949-b42e7dd5ad14",
+    "packageManager": "npm",
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}
--- a/samples/react-list-items-menu/README.md
+++ b/samples/react-list-items-menu/README.md
@ -0,0 +1,69 @@
+# List Items Menu
+
+## Summary
+
+This web part allows user create a navigation menu , grouped by any column of document library.
+When the user clicks on the header it dynamically load documents. 
+
+![ListItemsMenu](./assets/ListMenuDocs.gif)
+
+## Screenshots
+
+![ListItemsMenu](./assets/reactListItems1.jpg)
+
+![ListItemsMenu](./assets/reactListItems2.jpg)  
+
+![ListItemsMenu](./assets/reactListItems3.jpg)  
+
+
+## Used SharePoint Framework Version 
+![SPFx 1.11](https://img.shields.io/badge/version-1.11.0-green.svg)
+
+## Applies to
+
+* [SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
+* [Office 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment)
+
+## WebPart Properties
+ 
+Property |Type|Required| comments
+--------------------|----|--------|----------
+WebPart Title| Text| no|
+Select Document Library| dropdown|yes
+Select Field to Group By | dropdown|yes
+ 
+
+## Solution
+
+The Web Part Use PnPjs library, Fluent-Ui-react components
+
+Solution|Author(s)
+--------|---------
+React List Items Menu |João Mendes
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0|November 20, 2020|Initial release
+
+## 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.**
+
+---
+
+## Minimal Path to Awesome
+
+- Clone this repository
+- Move to sample folder
+- in the command line run:
+  - `npm install`
+  - `gulp build`
+  - `gulp bundle --ship`
+  - `gulp package-solution --ship`
+- Add to AppCatalog and deploy
+- go to SharePoint Admin Center and Approve required API Permissions
+
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-list-items-menu" />
--- a/samples/react-list-items-menu/assets/ListMenuDocs.gif
+++ b/samples/react-list-items-menu/assets/ListMenuDocs.gif
--- a/samples/react-list-items-menu/assets/reactListItems1.JPG
+++ b/samples/react-list-items-menu/assets/reactListItems1.JPG
--- a/samples/react-list-items-menu/assets/reactListItems2.JPG
+++ b/samples/react-list-items-menu/assets/reactListItems2.JPG
--- a/samples/react-list-items-menu/assets/reactListItems3.JPG
+++ b/samples/react-list-items-menu/assets/reactListItems3.JPG
--- a/samples/react-list-items-menu/azure-pipelines-build-template.yml
+++ b/samples/react-list-items-menu/azure-pipelines-build-template.yml
@ -0,0 +1,67 @@
+parameters:
+  name: ''
+jobs:
+  - job: ${{ parameters.name }}
+    pool:
+      vmImage: 'ubuntu-latest'
+      demands:
+      - npm
+      - node.js
+      - java
+    variables:
+      npm_config_cache: $(Pipeline.Workspace)/.npm
+
+    steps:
+      - checkout: self
+
+      - task: NodeTool@0
+        displayName: 'Use Node 10.x'
+        inputs:
+          versionSpec: 10.x
+          checkLatest: true
+
+      - task: CacheBeta@1
+        inputs:
+          key: npm | $(Agent.OS) | package-lock.json
+          path: $(npm_config_cache)
+          cacheHitVar: CACHE_RESTORED
+      - script: npm ci
+        displayName: 'npm ci'
+
+      - task: Gulp@0
+        displayName: 'Bundle project'
+        inputs:
+          targets: bundle
+          arguments: '--ship'
+
+      - script: npm test
+        displayName: 'npm test'
+
+      - task: PublishTestResults@2
+        displayName: Publish test results
+        inputs:
+          testResultsFormat: JUnit
+          testResultsFiles: '**/junit.xml'
+          #failTaskOnFailedTests: true #if we want to fail the build on failed unit tests
+
+      - task: PublishCodeCoverageResults@1
+        displayName: 'Publish code coverage results'
+        inputs:
+          codeCoverageTool: Cobertura
+          summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
+
+      - task: Gulp@0
+        displayName: 'Package Solution'
+        inputs:
+          targets: 'package-solution'
+          arguments: '--ship'
+
+      - task: CopyFiles@2
+        displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)'
+        inputs:
+          Contents: |
+            sharepoint/**/*.sppkg
+          TargetFolder: '$(Build.ArtifactStagingDirectory)'
+
+      - task: PublishBuildArtifacts@1
+        displayName: 'Publish Artifact: drop'
--- a/samples/react-list-items-menu/azure-pipelines-deploy-template.yml
+++ b/samples/react-list-items-menu/azure-pipelines-deploy-template.yml
@ -0,0 +1,39 @@
+parameters:
+  # unique name of the job
+  job_name: deploy_sppkg
+  # friendly name of the job
+  display_name: Upload & deploy *.sppkg to SharePoint app catalog
+  # name of target enviroment deploying to
+  target_environment: ''
+  # app catalog scope (tenant|sitecollection)
+  o365cli_app_catalog_scope: 'tenant'
+  variable_group_name: ''
+jobs:
+- deployment: ${{ parameters.job_name }}
+  displayName: ${{ parameters.display_name }}
+  pool:
+    vmImage: 'ubuntu-latest'
+  environment: ${{ parameters.target_environment }}
+  variables:
+  - group: ${{parameters.variable_group_name}} #o365_user_login, o365_user_password, o365_app_catalog_site_url
+  strategy:
+    runOnce:
+      deploy:
+        steps:
+        - checkout: none
+        - download: current
+          artifact: drop
+          patterns: '**/*.sppkg'
+        - script: sudo npm install --global @pnp/office365-cli
+          displayName: Install Office365 CLI
+        - script: o365 login $(o365_app_catalog_site_url) --authType password --userName $(o365_user_login) --password $(o365_user_password)
+          displayName: Login to Office365
+        - script: |
+            CMD_GET_SPPKG_NAME=$(find $(Pipeline.Workspace)/drop -name '*.sppkg' -exec basename {} \;)
+            echo "##vso[task.setvariable variable=SpPkgFileName;isOutput=true]${CMD_GET_SPPKG_NAME}"
+          displayName: Get generated *.sppkg filename
+          name: GetSharePointPackage
+        - script: o365 spo app add --filePath "$(Pipeline.Workspace)/drop/sharepoint/solution/$(GetSharePointPackage.SpPkgFileName)" --appCatalogUrl $(o365_app_catalog_site_url) --scope ${{ parameters.o365cli_app_catalog_scope }} --overwrite
+          displayName: Upload SharePoint package to Site Collection App Catalog
+        - script: o365 spo app deploy --name $(GetSharePointPackage.SpPkgFileName) --appCatalogUrl $(o365_app_catalog_site_url) --scope ${{ parameters.o365cli_app_catalog_scope }}
+          displayName: Deploy SharePoint package
--- a/samples/react-list-items-menu/azure-pipelines.yml
+++ b/samples/react-list-items-menu/azure-pipelines.yml
@ -0,0 +1,26 @@
+name: $(TeamProject)_$(BuildDefinitionName)_$(SourceBranchName)_$(Date:yyyyMMdd)$(Rev:.r)
+resources:
+- repo: self
+
+trigger:
+  branches:
+    include:
+    - master
+    - develop
+
+stages:
+- stage: build
+  displayName: build
+  jobs:
+    - template: ./azure-pipelines-build-template.yml
+      parameters:
+        name: 'buildsolution'
+- stage: 'deployqa'
+  # uncomment if you want deployments to occur only for a specific branch
+  #condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/develop'))
+  jobs:
+    - template: ./azure-pipelines-deploy-template.yml
+      parameters:
+        job_name: deploy_solution
+        target_environment: 'qa'
+        variable_group_name: qa_configuration
--- a/samples/react-list-items-menu/config/config.json
+++ b/samples/react-list-items-menu/config/config.json
@ -0,0 +1,20 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "list-items-menu-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/listItemsMenu/ListItemsMenuWebPart.js",
+          "manifest": "./src/webparts/listItemsMenu/ListItemsMenuWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "ListItemsMenuWebPartStrings": "lib/webparts/listItemsMenu/loc/{locale}.js",
+    "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js",
+    "PropertyControlStrings": "node_modules/@pnp/spfx-property-controls/lib/loc/{locale}.js"
+  }
+}
--- a/samples/react-list-items-menu/config/copy-assets.json
+++ b/samples/react-list-items-menu/config/copy-assets.json
@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "temp/deploy"
+}
--- a/samples/react-list-items-menu/config/deploy-azure-storage.json
+++ b/samples/react-list-items-menu/config/deploy-azure-storage.json
@ -0,0 +1,7 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
+  "workingDir": "./temp/deploy/",
+  "account": "<!-- STORAGE ACCOUNT NAME -->",
+  "container": "react-list-items-menu",
+  "accessKey": "<!-- ACCESS KEY -->"
+}
--- a/samples/react-list-items-menu/config/jest.config.json
+++ b/samples/react-list-items-menu/config/jest.config.json
@ -0,0 +1 @@
+{"preset":"@voitanos/jest-preset-spfx-react16","rootDir":"../src","collectCoverageFrom":["<rootDir>/**/*.{ts,tsx}","!<rootDir>/**/*.scss.*","!<rootDir>/loc/**/*.*"],"coverageReporters":["text","json","lcov","text-summary","cobertura"],"reporters":["default",["jest-junit",{"suiteName":"jest tests","outputDirectory":"temp/test/junit","outputName":"junit.xml"}]]}
--- a/samples/react-list-items-menu/config/package-solution.json
+++ b/samples/react-list-items-menu/config/package-solution.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "react-list-items-menu-client-side-solution",
+    "id": "8b4a758d-a968-4e7c-a949-b42e7dd5ad14",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true,
+    "isDomainIsolated": false,
+    "developer": {
+      "name": "",
+      "websiteUrl": "",
+      "privacyUrl": "",
+      "termsOfUseUrl": "",
+      "mpnId": ""
+    }
+  },
+  "paths": {
+    "zippedPackage": "solution/react-list-items-menu.sppkg"
+  }
+}
--- a/samples/react-list-items-menu/config/serve.json
+++ b/samples/react-list-items-menu/config/serve.json
@ -0,0 +1,10 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "port": 4321,
+  "https": true,
+  "initialPage": "https://localhost:5432/workbench",
+  "api": {
+    "port": 5432,
+    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
+  }
+}
--- a/samples/react-list-items-menu/config/write-manifests.json
+++ b/samples/react-list-items-menu/config/write-manifests.json
@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/write-manifests.schema.json",
+  "cdnBasePath": "<!-- PATH TO CDN -->"
+}
--- a/samples/react-list-items-menu/gulpfile.js
+++ b/samples/react-list-items-menu/gulpfile.js
@ -0,0 +1,58 @@
+'use strict';
+
+// check if gulp dist was called
+if (process.argv.indexOf('dist') !== -1) {
+    // add ship options to command call
+    process.argv.push('--ship');
+}
+
+const path = require('path');
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+const gulpSequence = require('gulp-sequence');
+
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+// Create clean distrubution package
+gulp.task('dist', gulpSequence('clean', 'bundle', 'package-solution'));
+// Create clean development package
+gulp.task('dev', gulpSequence('clean', 'bundle', 'package-solution'));
+
+
+
+
+/**
+ * Custom Framework Specific gulp tasks
+ */
+
+
+const argv = build.rig.getYargs().argv;
+const useCustomServe = argv['custom-serve'];
+const fs = require("fs");
+const workbenchApi = require("@microsoft/sp-webpart-workbench/lib/api");
+
+if (useCustomServe) {
+  build.tslintCmd.enabled = false;
+  
+  const ensureWorkbenchSubtask = build.subTask('ensure-workbench-task', function (gulp, buildOptions, done) {
+    this.log('Creating workbench.html file...');
+    try {
+      workbenchApi.default["/workbench"]();
+    } catch (e) { }
+
+    done();
+  });
+
+  build.rig.addPostBuildTask(build.task('ensure-workbench', ensureWorkbenchSubtask));
+
+  build.configureWebpack.mergeConfig({
+    additionalConfiguration: (generatedConfiguration) => {
+      fs.writeFileSync("./temp/_webpack_config.json", JSON.stringify(generatedConfiguration, null, 2));
+      return generatedConfiguration;
+    }
+  });
+
+}
+
+build.initialize(require('gulp'));
+
--- a/samples/react-list-items-menu/package-lock.json
+++ b/samples/react-list-items-menu/package-lock.json
--- a/samples/react-list-items-menu/package.json
+++ b/samples/react-list-items-menu/package.json
@ -0,0 +1,76 @@
+{
+  "name": "react-list-items-menu",
+  "version": "0.0.1",
+  "private": true,
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "preversion": "node ./tools/pre-version.js",
+    "postversion": "gulp dist",
+    "test": "./node_modules/.bin/jest --config ./config/jest.config.json",
+    "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll",
+    "serve": "cross-env NODE_OPTIONS=--max_old_space_size=4096 gulp bundle --custom-serve && cross-env NODE_OPTIONS=--max_old_space_size=4096 webpack-dev-server --mode development --config ./webpack.js --env.env=dev"
+  },
+  "dependencies": {
+    "@microsoft/sp-core-library": "1.11.0",
+    "@microsoft/sp-lodash-subset": "1.11.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.11.0",
+    "@microsoft/sp-property-pane": "1.11.0",
+    "@microsoft/sp-webpart-base": "1.11.0",
+    "@pnp/pnpjs": "^2.0.6",
+    "@pnp/spfx-controls-react": "1.19.0",
+    "@pnp/spfx-property-controls": "1.19.0",
+    "@types/jquery": "^3.5.0",
+    "@uifabric/file-type-icons": "^7.6.11",
+    "jquery": "^3.5.1",
+    "jsstore": "^3.10.3",
+    "moment": "^2.29.1",
+    "office-ui-fabric-react": "^7.123.1",
+    "react": "16.8.5",
+    "react-dom": "16.8.5"
+  },
+  "devDependencies": {
+    "@microsoft/microsoft-graph-types": "^1.12.0",
+    "@microsoft/rush-stack-compiler-3.7": "^0.6.x",
+    "@microsoft/sp-build-web": "1.11.0",
+    "@microsoft/sp-module-interfaces": "1.11.0",
+    "@microsoft/sp-tslint-rules": "1.11.0",
+    "@microsoft/sp-webpart-workbench": "1.11.0",
+    "@types/chai": "3.4.34",
+    "@types/es6-promise": "0.0.33",
+    "@types/mocha": "2.2.38",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "16.8.3",
+    "@types/webpack-env": "1.13.1",
+    "@voitanos/jest-preset-spfx-react16": "^1.3.2",
+    "ajv": "~5.2.2",
+    "file-loader": "^6.1.0",
+    "gulp": "~3.9.1",
+    "gulp-sequence": "1.0.0",
+    "jest": "^23.6.0",
+    "jest-junit": "^10.0.0",
+    "lodash": "^4.17.15",
+    "spfx-uifabric-themes": "^0.8.0",
+    "typescript": "~3.7.x",
+    "css-loader": "3.4.2",
+    "css-modules-typescript-loader": "4.0.0",
+    "fork-ts-checker-webpack-plugin": "4.1.0",
+    "node-sass": "4.13.1",
+    "sass-loader": "8.0.2",
+    "style-loader": "1.1.3",
+    "ts-loader": "6.2.1",
+    "webpack": "4.42.0",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3",
+    "del": "5.1.0",
+    "cross-env": "7.0.2"
+  },
+  "jest-junit": {
+    "output": "temp/test/junit/junit.xml",
+    "usePathForSuiteName": "true"
+  }
+}
--- a/samples/react-list-items-menu/src/Utils/Utils.ts
+++ b/samples/react-list-items-menu/src/Utils/Utils.ts
@ -0,0 +1,160 @@
+import { SPComponentLoader } from "@microsoft/sp-loader";
+import { sp } from "@pnp/sp";
+import "@pnp/sp/webs";
+import "@pnp/sp/regional-settings/web";
+import { IRegionalSettingsInfo } from "@pnp/sp/regional-settings";
+
+// get all the web's regional settings
+
+const DEFAULT_PERSONA_IMG_HASH: string = "7ad602295f8386b7615b582d87bcc294";
+const DEFAULT_IMAGE_PLACEHOLDER_HASH: string ="4a48f26592f4e1498d7a478a4c48609c";
+const MD5_MODULE_ID: string = "8494e7d7-6b99-47b2-a741-59873e42f16f";
+const PROFILE_IMAGE_URL: string = "/_layouts/15/userphoto.aspx?size=M&accountname=";
+
+/**
+ * Gets user photo
+ * @param userId
+ * @returns user photo
+ */
+export const getUserPhoto = async (userId): Promise<string> => {
+  const personaImgUrl = PROFILE_IMAGE_URL + userId;
+  console.log(personaImgUrl);
+  // tslint:disable-next-line: no-use-before-declare
+  const url: string = await getImageBase64(personaImgUrl);
+  // tslint:disable-next-line: no-use-before-declare
+  const newHash = await getMd5HashForUrl(url);
+
+  if (
+    newHash !== DEFAULT_PERSONA_IMG_HASH &&
+    newHash !== DEFAULT_IMAGE_PLACEHOLDER_HASH
+  ) {
+    return "data:image/png;base64," + url;
+  } else {
+    return "undefined";
+  }
+};
+
+/**
+ * Get MD5Hash for the image url to verify whether user has default image or custom image
+ * @param url
+ */
+export const getMd5HashForUrl = async (url: string) => {
+  return new Promise(async (resolve, reject) => {
+    // tslint:disable-next-line: no-use-before-declare
+    const library: any = await loadSPComponentById(MD5_MODULE_ID);
+    try {
+      const md5Hash = library.Md5Hash;
+      if (md5Hash) {
+        const convertedHash = md5Hash(url);
+        resolve(convertedHash);
+      }
+    } catch (error) {
+      resolve(url);
+    }
+  });
+};
+
+/**
+ * Load SPFx component by id, SPComponentLoader is used to load the SPFx components
+ * @param componentId - componentId, guid of the component library
+ */
+export const loadSPComponentById = async (componentId: string) => {
+  return new Promise((resolve, reject) => {
+    SPComponentLoader.loadComponentById(componentId)
+      .then((component: any) => {
+        resolve(component);
+      })
+      .catch((error) => {});
+  });
+};
+/**
+ * Gets image base64
+ * @param pictureUrl
+ * @returns image base64
+ */
+export const getImageBase64 = async (pictureUrl: string): Promise<string> => {
+  console.log(pictureUrl);
+  return new Promise((resolve, reject) => {
+    let image = new Image();
+    image.addEventListener("load", () => {
+      let tempCanvas = document.createElement("canvas");
+      (tempCanvas.width = image.width),
+        (tempCanvas.height = image.height),
+        tempCanvas.getContext("2d").drawImage(image, 0, 0);
+      let base64Str;
+      try {
+        base64Str = tempCanvas.toDataURL("image/png");
+      } catch (e) {
+        return "";
+      }
+      base64Str = base64Str.replace(/^data:image\/png;base64,/, "");
+      resolve(base64Str);
+    });
+    image.src = pictureUrl;
+  });
+};
+
+export const zeroPad = (num, places) => {
+  var zero = places - num.toString().length + 1;
+  return Array(+(zero > 0 && zero)).join("0") + num;
+};
+
+export const getSiteRegionalSettings = async (): Promise<
+  IRegionalSettingsInfo
+> => {
+  try {
+    const s = await sp.web.regionalSettings();
+    return s;
+  } catch (error) {
+    console.error(error);
+    Promise.reject(error);
+  }
+};
+
+export const convertTimeTo12H = (
+  _hour: number
+): Promise<{ hourInTimeFormat: string; current12HTimeFormat: string }> => {
+  console.log('prm',_hour);
+  return new Promise((resolve, rejected) => {
+    let hourInTimeFormat: string = "";
+    let current12HTimeFormat: string = "AM";
+    if (_hour >= 0 && _hour <= 11) {
+      if (_hour === 0) {
+        hourInTimeFormat = "12";
+      }else{
+        hourInTimeFormat = _hour.toString();
+      }
+      current12HTimeFormat = "AM";
+    } else {
+      const _hour12h = _hour - 12;
+      hourInTimeFormat = _hour12h === 0 ? "12" : _hour12h.toString();
+      current12HTimeFormat = "PM";
+    }
+    resolve({ hourInTimeFormat, current12HTimeFormat });
+  });
+};
+
+export const convertTimeTo24h = (
+  hour: number,
+  current12HTimeFormat: string
+): Promise<string> => {
+  return new Promise((resolve, rejected) => {
+    let hourInTimeFormat: string = "";
+    if (current12HTimeFormat === "PM") {
+      if (hour >= 1 && hour <= 11) {
+        if (hour === 12) {
+          hourInTimeFormat = "12";
+        }
+        const _hour24h = hour + 12;
+        hourInTimeFormat = _hour24h.toString();
+      }
+    } else {
+      if (hour === 12) {
+        hourInTimeFormat = "00";
+      } else {
+        hourInTimeFormat = hour.toString();
+      }
+    }
+    resolve(hourInTimeFormat);
+  });
+};
--- a/samples/react-list-items-menu/src/common/AppContext.ts
+++ b/samples/react-list-items-menu/src/common/AppContext.ts
@ -0,0 +1,17 @@
+
+import React from "react";
+import { WebPartContext } from "@microsoft/sp-webpart-base";
+import { MSGraphClient, AadTokenProvider } from "@microsoft/sp-http";
+import {   IReadonlyTheme } from '@microsoft/sp-component-base';
+import { IRegionalSettingsInfo} from "@pnp/sp/regional-settings";
+import { Connection } from "jsstore";
+
+export interface IAppContextProps {
+  idbConnection: Connection;
+  currentUser:string;
+  msGraphClient:MSGraphClient;
+  locale:string;
+  themeVariant: IReadonlyTheme | undefined;
+}
+
+export const AppContext = React.createContext<IAppContextProps>(undefined);
--- a/samples/react-list-items-menu/src/common/TeamsContrastTheme.json
+++ b/samples/react-list-items-menu/src/common/TeamsContrastTheme.json
@ -0,0 +1,24 @@
+{
+  "themePrimary": "#6264a7",
+  "themeLighterAlt": "#f7f7fb",
+  "themeLighter": "#e1e1f1",
+  "themeLight": "#c8c9e4",
+  "themeTertiary": "#989ac9",
+  "themeSecondary": "#7173b0",
+  "themeDarkAlt": "#585a95",
+  "themeDark": "#4a4c7e",
+  "themeDarker": "#37385d",
+  "neutralLighterAlt": "#0b0b0b",
+  "neutralLighter": "#151515",
+  "neutralLight": "#252525",
+  "neutralQuaternaryAlt": "#2f2f2f",
+  "neutralQuaternary": "#373737",
+  "neutralTertiaryAlt": "#595959",
+  "neutralTertiary": "#c8c8c8",
+  "neutralSecondary": "#d0d0d0",
+  "neutralPrimaryAlt": "#dadada",
+  "neutralPrimary": "#ffffff",
+  "neutralDark": "#f4f4f4",
+  "black": "#f8f8f8",
+  "white": "#000000"
+}
--- a/samples/react-list-items-menu/src/common/TeamsDarkTheme.json
+++ b/samples/react-list-items-menu/src/common/TeamsDarkTheme.json
@ -0,0 +1,24 @@
+{
+  "themePrimary": "#6264a7",
+  "themeLighterAlt": "#f7f7fb",
+  "themeLighter": "#e1e1f1",
+  "themeLight": "#c8c9e4",
+  "themeTertiary": "#989ac9",
+  "themeSecondary": "#7173b0",
+  "themeDarkAlt": "#585a95",
+  "themeDark": "#4a4c7e",
+  "themeDarker": "#37385d",
+  "neutralLighterAlt": "#2d2c2c",
+  "neutralLighter": "#2c2b2b",
+  "neutralLight": "#2a2929",
+  "neutralQuaternaryAlt": "#272626",
+  "neutralQuaternary": "#252525",
+  "neutralTertiaryAlt": "#242323",
+  "neutralTertiary": "#c8c8c8",
+  "neutralSecondary": "#d0d0d0",
+  "neutralPrimaryAlt": "#dadada",
+  "neutralPrimary": "#ffffff",
+  "neutralDark": "#f4f4f4",
+  "black": "#f8f8f8",
+  "white": "#2d2c2c"
+}
--- a/samples/react-list-items-menu/src/common/TeamsDefaultTheme.json
+++ b/samples/react-list-items-menu/src/common/TeamsDefaultTheme.json
@ -0,0 +1,24 @@
+{
+  "themePrimary": "#6264a7",
+  "themeLighterAlt": "#f7f7fb",
+  "themeLighter": "#e1e1f1",
+  "themeLight": "#c8c9e4",
+  "themeTertiary": "#989ac9",
+  "themeSecondary": "#7173b0",
+  "themeDarkAlt": "#585a95",
+  "themeDark": "#4a4c7e",
+  "themeDarker": "#37385d",
+  "neutralLighterAlt": "#ecebe9",
+  "neutralLighter": "#e8e7e6",
+  "neutralLight": "#dedddc",
+  "neutralQuaternaryAlt": "#cfcecd",
+  "neutralQuaternary": "#c6c5c4",
+  "neutralTertiaryAlt": "#bebdbc",
+  "neutralTertiary": "#b5b4b2",
+  "neutralSecondary": "#9d9c9a",
+  "neutralPrimaryAlt": "#868482",
+  "neutralPrimary": "#252423",
+  "neutralDark": "#565453",
+  "black": "#3e3d3b",
+  "white": "#f3f2f1"
+}
--- a/samples/react-list-items-menu/src/common/constants.ts
+++ b/samples/react-list-items-menu/src/common/constants.ts
@ -0,0 +1,35 @@
+import {  IDatePickerStrings } from 'office-ui-fabric-react/lib/DatePicker';
+export const DayPickerStrings: IDatePickerStrings = {
+  months: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+
+  shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+
+  days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+
+  shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+
+  goToToday: 'Go to today',
+  prevMonthAriaLabel: 'Go to previous month',
+  nextMonthAriaLabel: 'Go to next month',
+  prevYearAriaLabel: 'Go to previous year',
+  nextYearAriaLabel: 'Go to next year',
+  closeButtonAriaLabel: 'Close date picker',
+  monthPickerHeaderAriaLabel: '{0}, select to change the year',
+  yearPickerHeaderAriaLabel: '{0}, select to change the month',
+};
+
+export const _favoriteStarFillIcon: string = "FavoriteStarFill";
+export const _favoriteStarIcon: string = "FavoriteStar";
--- a/samples/react-list-items-menu/src/common/themeColors.module.scss
+++ b/samples/react-list-items-menu/src/common/themeColors.module.scss
@ -0,0 +1,16 @@
+$default-background: #f3f2f1;
+$default-color: #252423;
+$default-button-background: #6264a7;
+$default-Button-color: #f3f2f1;
+
+// dark theme
+$dark-background: #2d2c2c;
+$dark-color: #ffffff;
+$dark-button-background: #6264a7;
+$dark-button-color: #2d2c2c;
+
+// contrast theme
+$contrast-background: #000000;
+$contrast-color: #ffffff;
+$contrast-button-background: #b5c01c;
+$contrast-Button-color: #000000;
--- a/samples/react-list-items-menu/src/components/IListItemMenuState.ts
+++ b/samples/react-list-items-menu/src/components/IListItemMenuState.ts
@ -0,0 +1,8 @@
+import { Nav, INavStyles, INavLinkGroup } from 'office-ui-fabric-react/lib/Nav';
+export interface IListItemsMenuState {
+  navLinkGroups: INavLinkGroup[];
+  isLoading: boolean;
+  hasError:boolean;
+  errorMessage:string;
+  listName:string;
+}
--- a/samples/react-list-items-menu/src/components/IListItemsMenuProps.ts
+++ b/samples/react-list-items-menu/src/components/IListItemsMenuProps.ts
@ -0,0 +1,14 @@
+import { IReadonlyTheme } from "@microsoft/sp-component-base";
+import { DisplayMode } from "@microsoft/sp-core-library";
+
+export interface IListItemsMenuProps {
+  title: string;
+  listId:string;
+  listBaseTemplate:number;
+  fieldName:string;
+  locale:string;
+  themeVariant: IReadonlyTheme | undefined;
+  onConfigure: () => void;
+  displayMode: DisplayMode;
+  updateProperty: (value: string) => void;
+}
--- a/samples/react-list-items-menu/src/components/ListItemsMenu.module.scss
+++ b/samples/react-list-items-menu/src/components/ListItemsMenu.module.scss
@ -0,0 +1,74 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+.listItemsMenu {
+  .container {
+    max-width: 700px;
+    margin: 0px auto;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .row {
+    @include ms-Grid-row;
+    @include ms-fontColor-white;
+    background-color: $ms-color-themeDark;
+    padding: 20px;
+  }
+
+  .column {
+    @include ms-Grid-col;
+    @include ms-lg10;
+    @include ms-xl8;
+    @include ms-xlPush2;
+    @include ms-lgPush1;
+  }
+
+  .title {
+    @include ms-font-xl;
+    @include ms-fontColor-white;
+  }
+
+  .subTitle {
+    @include ms-font-l;
+    @include ms-fontColor-white;
+  }
+
+  .description {
+    @include ms-font-l;
+    @include ms-fontColor-white;
+  }
+
+  .button {
+    // Our button
+    text-decoration: none;
+    height: 32px;
+
+    // Primary Button
+    min-width: 80px;
+    background-color: $ms-color-themePrimary;
+    border-color: $ms-color-themePrimary;
+    color: $ms-color-white;
+
+    // Basic Button
+    outline: transparent;
+    position: relative;
+    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+    -webkit-font-smoothing: antialiased;
+    font-size: $ms-font-size-m;
+    font-weight: $ms-font-weight-regular;
+    border-width: 0;
+    text-align: center;
+    cursor: pointer;
+    display: inline-block;
+    padding: 0 16px;
+
+    .label {
+      font-weight: $ms-font-weight-semibold;
+      font-size: $ms-font-size-m;
+      height: 32px;
+      line-height: 32px;
+      margin: 0 4px;
+      vertical-align: top;
+      display: inline-block;
+    }
+  }
+}
--- a/samples/react-list-items-menu/src/components/ListItemsMenu.tsx
+++ b/samples/react-list-items-menu/src/components/ListItemsMenu.tsx
@ -0,0 +1,255 @@
+import * as React from "react";
+
+import * as strings from "ListItemsMenuWebPartStrings";
+import {
+  filter,
+  findIndex
+} from "lodash";
+import {
+  Customizer,
+  INavLink,
+  INavLinkGroup,
+  INavStyles,
+  Label,
+  Link,
+  mergeStyleSets,
+  MessageBar,
+  MessageBarType,
+  Nav,
+  Spinner,
+  SpinnerSize,
+  Stack
+} from "office-ui-fabric-react";
+
+import { getFileTypeIconProps } from "@uifabric/file-type-icons";
+
+import { useList } from "../hooks/useList";
+import { IListItemsMenuState } from "./IListItemMenuState";
+import { IListItemsMenuProps } from "./IListItemsMenuProps";
+
+const { getGroupItems, getGroupHeaders, getField } = useList();
+
+export const ListItemsMenu: React.FunctionComponent<IListItemsMenuProps> = (
+  props: IListItemsMenuProps
+) => {
+  const [state, setState] = React.useState<IListItemsMenuState>({
+    navLinkGroups: [],
+    isLoading: false,
+    hasError: false,
+    errorMessage: "",
+    listName: "",
+  });
+
+  const navStyles: Partial<INavStyles> = React.useMemo(() => {
+    return {
+      group: {
+        fontWeight: 700,
+      },
+      groupContent: {
+        maxHeight: 450,
+        overflow: "auto",
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: props.themeVariant.palette.neutralLighter,
+        },
+        "&::-webkit-scrollbar": {
+          width: 10,
+        },
+      },
+    };
+  }, [props.themeVariant]);
+
+  const classComponent = React.useMemo(() => {
+    return mergeStyleSets({
+      webPartTitle: {
+        fontWeight: 500,
+        overflowX: "hidden",
+        textOverflow: "Ellipsis",
+        fontSize: props.themeVariant.fonts.large.fontSize,
+        marginBottom: 10,
+      },
+    });
+  }, [props.themeVariant]);
+
+  const stateRef = React.useRef(state); // Use to access state on eventListenners
+
+  // On component did mount only if listId or Field Change
+  React.useEffect(() => {
+    (async () => {
+      if (!props.listId || !props.fieldName) {
+        return;
+      }
+      try {
+        let _navLinksGroups: INavLinkGroup[] = [];
+        stateRef.current = {
+          ...stateRef.current,
+          isLoading: true,
+          navLinkGroups: _navLinksGroups,
+        };
+        setState(stateRef.current);
+
+        const _groupHeaders = await getGroupHeaders(
+          props.listId,
+          props.fieldName,
+          props.listBaseTemplate
+        );
+        const _field: any = await getField(props.listId, props.fieldName);
+        for (const groupHeader of _groupHeaders) {
+          let _name = groupHeader[props.fieldName]
+            ? groupHeader[props.fieldName]
+            : "Unassigned";
+
+          if (_name != "Unassigned" && _field.fieldType === "User") {
+            _name = _name[0]?.title;
+          }
+
+          if (_name != "Unassigned" && _field.fieldType === "Lookup") {
+            _name = _name[0]?.lookupValue;
+          }
+
+          _navLinksGroups.push({
+            name: _name,
+            groupData: groupHeader[props.fieldName],
+            collapseByDefault: true,
+
+            onHeaderClick: _onGroupHeaderClick,
+            links: [],
+          });
+        }
+        stateRef.current = {
+          ...stateRef.current,
+          hasError: false,
+          errorMessage: "",
+          isLoading: false,
+          listName: _field.fieldScope,
+          navLinkGroups: _navLinksGroups,
+        };
+        setState(stateRef.current);
+      } catch (error) {
+        stateRef.current = {
+          ...stateRef.current,
+          hasError: true,
+          errorMessage: error.message,
+        };
+        setState(stateRef.current);
+      }
+    })();
+  }, [props.listId, props.fieldName]);
+
+  // On Header click get Items for the header
+  const _onGroupHeaderClick = async (
+    ev: React.MouseEvent<HTMLElement, MouseEvent>,
+    isCollapse: Boolean
+  ) => {
+    try {
+      const _groupName = ev.currentTarget.innerText.split("\n")[1]; // the first Line has icon , text is on 2 line
+      console.log(_groupName);
+      const { navLinkGroups } = stateRef.current;
+
+      const _navGroup = filter(navLinkGroups, { name: _groupName });
+      if (_navGroup?.length && _navGroup[0]?.links?.length === 0) {
+        const _navlinks: INavLink[] = [];
+        const _groupHeaderItems: any[] = await getGroupItems(
+          props.listId,
+          props.fieldName,
+          _groupName,
+          props.listBaseTemplate
+        );
+        if (_groupHeaderItems?.length) {
+          for (const _groupHeaderItem of _groupHeaderItems) {
+            if (props.listBaseTemplate === 0) {
+              // List
+
+              _navlinks.push({
+                name: _groupHeaderItem.Title,
+                url: `${_groupHeaderItem.FileDirRef}/dispform.aspx?ID=${_groupHeaderItem.Id}`,
+                iconProps: {
+                  iconName: "TaskManager",
+                },
+                key: _groupHeaderItem.Id,
+                target: "_blank",
+                isExpanded: false,
+              });
+            }
+            if (props.listBaseTemplate === 1) {
+              // Document Library
+
+              /* const _fileExt: string = _groupItem.url.substring(
+              _groupItem.url.lastIndexOf(".") + 1
+            ); */
+
+              _navlinks.push({
+                name: _groupHeaderItem.FileLeafRef,
+                url: _groupHeaderItem.FileRef,
+                iconProps: {
+                    ...getFileTypeIconProps({
+                    extension: _groupHeaderItem.DocIcon,
+                    size: 16,
+                    imageFileType: "svg",
+                  }),
+                },
+                key: _groupHeaderItem.title,
+                target: "_blank",
+                isExpanded: false,
+              });
+            }
+          }
+        }
+        // Update Navigation with Items of Group
+        _navGroup[0].links = _navlinks;
+      }
+
+      const _index = findIndex(navLinkGroups, { name: _groupName });
+      _navGroup[0].collapseByDefault = true;
+      navLinkGroups[_index] = _navGroup[0];
+      stateRef.current = { ...stateRef.current, navLinkGroups: navLinkGroups };
+      setState(stateRef.current);
+    } catch (error) {}
+  };
+
+  // Show Error if Exists
+  if (state.hasError) {
+    return (
+      <>
+        <MessageBar messageBarType={MessageBarType.error} isMultiline>
+          {state.errorMessage}
+        </MessageBar>
+      </>
+    );
+  }
+  // render component
+  return (
+    <>
+      <Customizer settings={{ theme: props.themeVariant }}>
+        {state.isLoading ? (
+          <Stack horizontal horizontalAlign="center">
+            <Spinner size={SpinnerSize.medium}></Spinner>
+          </Stack>
+        ) : (
+          <>
+            <Stack
+              horizontalAlign="space-between"
+              horizontal
+              tokens={{ childrenGap: 10 }}
+              style={{ width: "100%" }}
+            >
+              <div className={classComponent.webPartTitle}>{props.title}</div>
+              <Link href={state.listName}>View All</Link>
+            </Stack>
+            {state.navLinkGroups?.length === 0 ? (
+              <Label
+                style={{
+                  fontWeight: 400,
+                  fontSize: props.themeVariant.fonts.small.fontSize,
+                }}
+              >
+                {strings.NodocumentsLabel}
+              </Label>
+            ) : (
+              <Nav styles={navStyles} groups={state.navLinkGroups}></Nav>
+            )}
+          </>
+        )}
+      </Customizer>
+    </>
+  );
+};
--- a/samples/react-list-items-menu/src/entities/IListItemsMenu.ts
+++ b/samples/react-list-items-menu/src/entities/IListItemsMenu.ts
@ -0,0 +1,6 @@
+export interface IListItemsMenu {
+ groupBy:string;
+ id:string;
+ title:string;
+ url:string;
+}
--- a/samples/react-list-items-menu/src/entities/iDbTables.ts
+++ b/samples/react-list-items-menu/src/entities/iDbTables.ts
@ -0,0 +1,38 @@
+import { DATA_TYPE, ITable } from "jsstore";
+
+
+const iDbListItems: ITable = {
+  name: 'NavItems',
+  columns: {
+    groupBy: {
+      notNull: true,
+      dataType: DATA_TYPE.String
+  },
+      id: {
+          primaryKey: true,
+      },
+      name: {
+          notNull: true,
+          dataType: DATA_TYPE.String
+      },
+      url: {
+          dataType: DATA_TYPE.String,
+          notNull: true
+      }
+  }
+};
+
+const iDbTokens: ITable = {
+  name: 'Tokens',
+  columns: {
+      id: {
+          primaryKey: true,
+      },
+      token: {
+          notNull: true,
+          dataType: DATA_TYPE.String
+      },
+  }
+};
+
+export const iDbTables : ITable[] = [iDbListItems, iDbTokens];
--- a/samples/react-list-items-menu/src/hooks/useInterval.ts
+++ b/samples/react-list-items-menu/src/hooks/useInterval.ts
@ -0,0 +1,21 @@
+import React, { useRef } from "react";
+
+export const  useInterval = (callback:any, delay:number) => {
+  const savedCallback = useRef(null);
+
+  // Remember the latest function.
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  React.useEffect(() => {
+   const tick = () => {
+      savedCallback.current();
+    };
+    if (delay !== null) {
+      let id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+  }, [delay]);
+};
--- a/samples/react-list-items-menu/src/hooks/useJsStore.ts
+++ b/samples/react-list-items-menu/src/hooks/useJsStore.ts
@ -0,0 +1,25 @@
+import * as JsStoreWorker from "jsstore/dist/jsstore.worker.commonjs2";
+window["JsStoreWorker"] = JsStoreWorker;
+import * as JsStore from "jsstore";
+import { ITable, DATA_TYPE, IDataBase } from "jsstore";
+
+// Otherwise due to multiple instance multiple worker will be created.
+const idbCon = new JsStore.Connection();
+
+export const useJsStore =  () => {
+  const initJsStore = async (
+    dbname: string,
+    tablesSchemas: ITable[]
+  ): Promise<JsStore.Connection> => {
+    const dataBase: IDataBase = {
+      name: dbname,
+      tables: tablesSchemas,
+    };
+      idbCon.initDb(dataBase);
+      window[`idbCon_${dbname}`] = idbCon;
+      return idbCon;
+
+  };
+
+  return { initJsStore };
+};
--- a/samples/react-list-items-menu/src/hooks/useList.ts
+++ b/samples/react-list-items-menu/src/hooks/useList.ts
@ -0,0 +1,158 @@
+import "@pnp/sp/fields";
+import "@pnp/sp/items";
+import "@pnp/sp/lists";
+import "@pnp/sp/webs";
+
+import {
+  sortBy,
+  uniqBy
+} from "lodash";
+import moment from "moment";
+
+import { sp } from "@pnp/sp";
+import { IFieldInfo } from "@pnp/sp/fields";
+import { IListInfo } from "@pnp/sp/lists";
+
+export const useList = () => {
+  // Run on useList hook
+  (async () => {})();
+
+  // Get List Columns
+  const getListColumns = async (listId: string): Promise<IFieldInfo[]> => {
+    const _listColumnsResults: IFieldInfo[] = await sp.web.lists
+      .getById(listId)
+      .fields.filter("Hidden eq false")
+      .get();
+
+    const _wColumns: IFieldInfo[] = uniqBy(
+      sortBy(_listColumnsResults, "Title"),
+      "Title"
+    );
+    return _wColumns;
+  };
+
+  const getField = async (listId: string, field: string): Promise<any> => {
+    const _field: IFieldInfo = await sp.web.lists
+      .getById(listId)
+      .fields.getByInternalNameOrTitle(field)
+      .get();
+
+    const fieldType = _field.TypeAsString;
+    const fieldScope = _field.Scope;
+    return { fieldType, fieldScope };
+  };
+
+  const getGroupHeaders = async (
+    listId: string,
+    groupByField: string,
+    baseTemplate: number
+  ): Promise<any[]> => {
+    let _viewXml = `<View Scope='Recursive'>
+    <Query>
+        <GroupBy Collapse="TRUE">
+            <FieldRef Name="${groupByField}"/>
+        </GroupBy>
+    </Query>
+    <RowLimit>1000</RowLimit>
+</View>`;
+
+    const _groupHeadersResults = await sp.web.lists
+      .getById(listId)
+      .renderListDataAsStream({ ViewXml: _viewXml });
+
+    //console.log("groups", _groupHeadersResults.Row);
+    return uniqBy(_groupHeadersResults.Row, groupByField);
+  };
+
+  const getGroupItems = async (
+    listId: string,
+    groupByField: string,
+    groupFieldValue: string,
+    baseTemplate: number
+  ): Promise<any[]> => {
+    const _field: any = await getField(listId, groupByField);
+
+    switch (_field.fieldType) {
+      case "DateTime":
+        groupFieldValue =
+          groupFieldValue != "Unassigned"
+            ? moment(groupFieldValue).format("YYYY-MM-DD")
+            : "Unassigned";
+        break;
+      case "AllDayEvent":
+        groupFieldValue = groupFieldValue === "No" ? "0" : "1";
+        break;
+      default:
+        break;
+    }
+
+    let _viewXml = `<View Scope='Recursive'>
+           <Query>
+            <OrderBy>
+               <FieldRef Name="${groupByField}" Ascending="FALSE"></FieldRef>
+            </OrderBy>
+           </Query>
+           </View>`;
+
+    if (groupFieldValue != "Unassigned") {
+      _viewXml = `<View Scope='Recursive'>
+          <Query>
+              <OrderBy>
+                <FieldRef Name="${groupByField}" Ascending="FALSE"></FieldRef>
+              </OrderBy>
+           <Where>
+            <Eq>
+              <FieldRef Name="${groupByField}"></FieldRef>
+              <Value Type="${_field.fieldType}" IncludeTimeValue="FALSE">${groupFieldValue}</Value>
+           </Eq>
+          </Where>
+          </Query>
+       </View>`;
+    }
+
+    if (groupFieldValue === "Unassigned") {
+      _viewXml = `<View Scope='Recursive'>
+        <Query>
+            <OrderBy>
+              <FieldRef Name="${groupByField}" Ascending="FALSE"></FieldRef>
+            </OrderBy>
+         <Where>
+          <IsNull>
+            <FieldRef Name="${groupByField}"></FieldRef>
+         </IsNull>
+        </Where>
+        </Query>
+     </View>`;
+    }
+
+    const _groupItemsResults = await sp.web.lists
+      .getById(listId)
+      .renderListDataAsStream({ ViewXml: _viewXml });
+
+    console.log("items", _groupItemsResults.Row);
+    return _groupItemsResults.Row;
+  };
+
+  // Get Lists
+  const getLists = async (baseTemplate: number): Promise<IListInfo[]> => {
+    let _filter: string = "Hidden eq false and ";
+    if (baseTemplate === 0) {
+      _filter = _filter + " BaseType ne 1";
+    } else {
+      _filter = _filter + " BaseType eq 1";
+    }
+    const _lists: IListInfo[] = await sp.web.lists.filter(_filter).get();
+
+    console.log("lists", _lists);
+    return _lists;
+  };
+
+  // Return functions
+  return {
+    getListColumns,
+    getLists,
+    getGroupItems,
+    getGroupHeaders,
+    getField,
+  };
+};
--- a/samples/react-list-items-menu/src/index.ts
+++ b/samples/react-list-items-menu/src/index.ts
@ -0,0 +1 @@
+// A file is required to be in the root of the /src directory by the TypeScript compiler
--- a/samples/react-list-items-menu/src/webparts/listItemsMenu/ListItemsMenuWebPart.manifest.json
+++ b/samples/react-list-items-menu/src/webparts/listItemsMenu/ListItemsMenuWebPart.manifest.json
@ -0,0 +1,31 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "64e3a357-6678-4553-ab7c-f37422308b22",
+  "alias": "ListItemsMenuWebPart",
+  "componentType": "WebPart",
+  "supportsFullBleed": false,
+  "supportsThemeVariants": true,
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // 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","TeamsPersonalApp","TeamsTab"],
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "SPFx Custom Web Parts" },
+    "title": { "default": "List menu documents " },
+    "description": { "default": "Documents" },
+    "officeFabricIconFontName": "GroupedList",
+    "properties": {
+      "title": "Documents",
+      "listId": "",
+      "fieldName": "Title",
+      "listBasetemplate": 1
+    }
+  }]
+}
--- a/samples/react-list-items-menu/src/webparts/listItemsMenu/ListItemsMenuWebPart.ts
+++ b/samples/react-list-items-menu/src/webparts/listItemsMenu/ListItemsMenuWebPart.ts
@ -0,0 +1,300 @@
+import * as React from "react";
+import * as ReactDom from "react-dom";
+
+import * as strings from "ListItemsMenuWebPartStrings";
+import {
+  loadTheme,
+  MessageBarType,
+  SpinnerSize
+} from "office-ui-fabric-react";
+
+import {
+  IReadonlyTheme,
+  ThemeChangedEventArgs,
+  ThemeProvider
+} from "@microsoft/sp-component-base";
+import { MSGraphClient } from "@microsoft/sp-http";
+import {
+  IPropertyPaneConfiguration,
+  IPropertyPaneDropdownOption,
+  IPropertyPaneField,
+  IPropertyPaneGroup,
+  IPropertyPanePage,
+  PropertyPaneDropdown,
+  PropertyPaneTextField
+} from "@microsoft/sp-property-pane";
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { sp } from "@pnp/sp";
+import {
+  PropertyFieldListPicker,
+  PropertyFieldListPickerOrderBy
+} from "@pnp/spfx-property-controls/lib/PropertyFieldListPicker";
+import {
+  PropertyFieldMessage
+} from "@pnp/spfx-property-controls/lib/PropertyFieldMessage";
+import {
+  PropertyFieldSpinner
+} from "@pnp/spfx-property-controls/lib/PropertyFieldSpinner";
+
+import { IListItemsMenuProps } from "../../components/IListItemsMenuProps";
+import { ListItemsMenu } from "../../components/ListItemsMenu";
+import { useList } from "../../hooks/useList";
+
+export interface IListItemsMenuWebPartProps {
+  title: string;
+  listId: string;
+  fieldName: string;
+  listBasetemplate: number;
+}
+
+const teamsDefaultTheme = require("../../common/TeamsDefaultTheme.json");
+const teamsDarkTheme = require("../../common/TeamsDarkTheme.json");
+const teamsContrastTheme = require("../../common/TeamsContrastTheme.json");
+
+const { getListColumns,  getLists } = useList() ;
+
+export default class ListItemsMenuWebPart extends BaseClientSideWebPart<
+  IListItemsMenuWebPartProps
+> {
+  private columns: IPropertyPaneDropdownOption[] = [];
+  private lists: IPropertyPaneDropdownOption[] = [];
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+  private _msgGraphclient: MSGraphClient;
+  private _hasError: boolean = false;
+  private _messageError: string = undefined;
+
+
+  protected async onInit(): Promise<void> {
+
+    sp.setup({
+      spfxContext: this.context,
+    });
+
+    this._msgGraphclient = await this.context.msGraphClientFactory.getClient();
+
+    this._themeProvider = this.context.serviceScope.consume(
+      ThemeProvider.serviceKey
+    );
+    // If it exists, get the theme variant
+    this._themeVariant = this._themeProvider.tryGetTheme();
+    // Register a handler to be notified if the theme variant changes
+    this._themeProvider.themeChangedEvent.add(
+      this,
+      this._handleThemeChangedEvent
+    );
+
+    if (this.context.sdks.microsoftTeams) {
+      // in teams ?
+      const context = this.context.sdks.microsoftTeams!.context;
+      this._applyTheme(context.theme || "default");
+      this.context.sdks.microsoftTeams.teamsJs.registerOnThemeChangeHandler(
+        this._applyTheme
+      );
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * Update the current theme variant reference and re-render.
+   *
+   * @param args The new theme
+   */
+  private _handleThemeChangedEvent(args: ThemeChangedEventArgs): void {
+    this._themeVariant = args.theme;
+
+    this.render();
+  }
+
+  // Apply btheme id in Teams
+  private _applyTheme = (theme: string): void => {
+    this.context.domElement.setAttribute("data-theme", theme);
+    document.body.setAttribute("data-theme", theme);
+
+    if (theme == "dark") {
+      loadTheme({
+        palette: teamsDarkTheme,
+      });
+    }
+
+    if (theme == "default") {
+      loadTheme({
+        palette: teamsDefaultTheme,
+      });
+    }
+
+    if (theme == "contrast") {
+      loadTheme({
+        palette: teamsContrastTheme,
+      });
+    }
+  }
+
+  public render(): void {
+
+      const element: React.ReactElement<IListItemsMenuProps> = React.createElement(
+      ListItemsMenu,
+      {
+        title: this.properties.title,
+        listId: this.properties.listId,
+        fieldName: this.properties.fieldName,
+        themeVariant: this._themeVariant,
+        locale: this.context.pageContext.cultureInfo.currentUICultureName,
+        listBaseTemplate: this.properties.listBasetemplate,
+        onConfigure: () =>{ this.context.propertyPane.open(); },
+        displayMode: this.displayMode,
+        updateProperty: (value: string) => {
+          this.properties.title = value;
+        }
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected get disableReactivePropertyChanges() {
+    return true;
+   }
+
+  protected async onPropertyPaneConfigurationStart() {
+    if (
+      this.properties.fieldName &&
+      this.properties.listId &&
+      this.columns.length === 0
+    ) {
+      await this.addListColumns(this.properties.listId);
+      this.context.propertyPane.refresh();
+    }
+
+    if ( this.properties.listId && this.lists.length === 0){
+      await this.addLists('1');
+      this.context.propertyPane.refresh();
+    }
+  }
+
+  protected async onPropertyPaneFieldChanged(
+    propertyPath: string,
+    oldValue: any,
+    newValue: any
+  ) {
+
+    if (propertyPath === "listId" && newValue != oldValue) {
+      this.columns = [];
+
+      this.context.propertyPane.refresh();
+      await this.addListColumns(newValue);
+      this.context.propertyPane.refresh();
+    }
+  }
+
+  private async addLists(newValue: any) {
+    try {
+      this.lists = [];
+      const _lists = await getLists(newValue);
+      console.log(_lists);
+      for (const _list of _lists) {
+        this.lists.push({ key: _list.Id, text: _list.Title });
+      }
+    } catch (error) {
+      this._hasError = true;
+      this._messageError =error.message;
+    }
+  }
+
+
+  private async addListColumns(newValue: any) {
+    try {
+      this.columns = [];
+      const _listColumns = await getListColumns(newValue);
+      console.log(_listColumns);
+      for (const _column of _listColumns) {
+        this.columns.push({ key: _column.InternalName, text: _column.Title });
+      }
+    } catch (error) {
+      this._hasError = true;
+      this._messageError = error.message;
+    }
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    const _pages: IPropertyPanePage[] = [
+      {
+        header: {
+          description: strings.PropertyPaneDescription,
+        },
+        groups: [
+          {
+            groupName: strings.BasicGroupName,
+            groupFields: [
+              PropertyPaneTextField("title", {
+                label: strings.DescriptionFieldLabel,
+              }),
+            ],
+          },
+        ],
+      },
+    ];
+    let groups: IPropertyPaneGroup = _pages[0].groups[0] as IPropertyPaneGroup;
+    let groupFields: IPropertyPaneField<any>[] = groups.groupFields;
+      groupFields.push(
+       PropertyFieldListPicker("listId", {
+        label: "Select Document Library",
+        selectedList: this.properties.listId  ,
+        includeHidden: false,
+        baseTemplate: 101,
+        orderBy: PropertyFieldListPickerOrderBy.Title,
+        disabled: false,
+        onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+        properties: this.properties,
+        context: this.context,
+        onGetErrorMessage: null,
+        deferredValidationTime: 0,
+        key: "listPickerFieldId",
+      })
+      );
+
+
+
+    if (this.properties.listId) {
+      groupFields.push(
+        PropertyFieldSpinner("", {
+          key: "sp1",
+          size: SpinnerSize.medium,
+          isVisible: (this.columns.length || this._hasError) ? false : true,
+          label: "Loading ...",
+        })
+      );
+    }
+
+    // Show Columns
+    if (this.columns.length > 0) {
+      groupFields.push(
+        PropertyPaneDropdown("fieldName", {
+          label: "Select field to group by documents",
+          options: this.columns,
+          selectedKey: this.properties.fieldName,
+        })
+      );
+    }
+
+    // Show Error
+    if (this._hasError) {
+      groupFields.push(
+        PropertyFieldMessage("", {
+          key: "msgError",
+          messageType: MessageBarType.error,
+          multiline: true,
+          text: this._messageError,
+          isVisible: this._hasError,
+        })
+      );
+    }
+
+    const _panelConfiguration: IPropertyPaneConfiguration = { pages: _pages };
+    return _panelConfiguration;
+  }
+}
--- a/samples/react-list-items-menu/src/webparts/listItemsMenu/loc/en-us.js
+++ b/samples/react-list-items-menu/src/webparts/listItemsMenu/loc/en-us.js
@ -0,0 +1,8 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Show documents grouped by field",
+    "BasicGroupName": "Properties",
+    "DescriptionFieldLabel": "Title",
+    "NodocumentsLabel":"No documents found in library"
+  }
+});
--- a/samples/react-list-items-menu/src/webparts/listItemsMenu/loc/mystrings.d.ts
+++ b/samples/react-list-items-menu/src/webparts/listItemsMenu/loc/mystrings.d.ts
@ -0,0 +1,11 @@
+declare interface IListItemsMenuWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  DescriptionFieldLabel: string;
+  NodocumentsLabel:string;
+}
+
+declare module 'ListItemsMenuWebPartStrings' {
+  const strings: IListItemsMenuWebPartStrings;
+  export = strings;
+}
--- a/samples/react-list-items-menu/teams/64e3a357-6678-4553-ab7c-f37422308b22_color.png
+++ b/samples/react-list-items-menu/teams/64e3a357-6678-4553-ab7c-f37422308b22_color.png
--- a/samples/react-list-items-menu/teams/64e3a357-6678-4553-ab7c-f37422308b22_outline.png
+++ b/samples/react-list-items-menu/teams/64e3a357-6678-4553-ab7c-f37422308b22_outline.png
--- a/samples/react-list-items-menu/tools/pre-version.js
+++ b/samples/react-list-items-menu/tools/pre-version.js
@ -0,0 +1,64 @@
+/**
+ * This script updates the package-solution version analogue to the
+ * the package.json file.
+ */
+
+if (process.env.npm_package_version === undefined) {
+
+    throw 'Package version cannot be evaluated';
+
+}
+
+// define path to package-solution file
+const solution = './config/package-solution.json',
+    teams = './teams/manifest.json';
+
+// require filesystem instance
+const fs = require('fs');
+
+// get next automated package version from process variable
+const nextPkgVersion = process.env.npm_package_version;
+
+// make sure next build version match
+const nextVersion = nextPkgVersion.indexOf('-') === -1 ?
+    nextPkgVersion : nextPkgVersion.split('-')[0];
+
+// Update version in SPFx package-solution if exists
+if (fs.existsSync(solution)) {
+
+    // read package-solution file
+    const solutionFileContent = fs.readFileSync(solution, 'UTF-8');
+    // parse file as json
+    const solutionContents = JSON.parse(solutionFileContent);
+
+    // set property of version to next version
+    solutionContents.solution.version = nextVersion + '.0';
+
+    // save file
+    fs.writeFileSync(
+        solution,
+        // convert file back to proper json
+        JSON.stringify(solutionContents, null, 2),
+        'UTF-8');
+
+}
+
+// Update version in teams manifest if exists
+if (fs.existsSync(teams)) {
+
+    // read package-solution file
+    const teamsManifestContent = fs.readFileSync(teams, 'UTF-8');
+    // parse file as json
+    const teamsContent = JSON.parse(teamsManifestContent);
+
+    // set property of version to next version
+    teamsContent.version = nextVersion;
+
+    // save file
+    fs.writeFileSync(
+        teams,
+        // convert file back to proper json
+        JSON.stringify(teamsContent, null, 2),
+        'UTF-8');
+
+}
--- a/samples/react-list-items-menu/tsconfig.json
+++ b/samples/react-list-items-menu/tsconfig.json
@ -0,0 +1,41 @@
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "lib",
+    "inlineSources": false,
+    "strictNullChecks": false,
+    "noUnusedLocals": false,
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
+    "types": [
+      "es6-promise",
+      "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
+    ],
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}
--- a/samples/react-list-items-menu/tslint.json
+++ b/samples/react-list-items-menu/tslint.json
@ -0,0 +1,30 @@
+{
+  "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-with-statement": true,
+    "semicolon": true,
+    "trailing-comma": false,
+    "typedef": false,
+    "typedef-whitespace": false,
+    "use-named-parameter": true,
+    "variable-name": false,
+    "whitespace": false
+  }
+}
--- a/samples/react-list-items-menu/webpack.js
+++ b/samples/react-list-items-menu/webpack.js
@ -0,0 +1,259 @@
+const path = require("path");
+const fs = require("fs");
+const webpack = require("webpack");
+const resolve = require("path").resolve;
+const CertStore = require("@microsoft/gulp-core-build-serve/lib/CertificateStore");
+const CertificateStore = CertStore.CertificateStore || CertStore.default;
+const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
+const del = require("del");
+const port = 4321;
+const host = "https://localhost:" + port;
+
+///
+// Transforms define("<guid>", ...) to web part specific define("<web part id_version", ...)
+// the same approach is used inside copyAssets SPFx build step
+///
+class DynamicLibraryPlugin {
+  constructor(options) {
+    this.opitons = options;
+  }
+
+  apply(compiler) {
+    compiler.hooks.emit.tap("DynamicLibraryPlugin", compilation => {
+      for (const assetId in this.opitons.modulesMap) {
+        const moduleMap = this.opitons.modulesMap[assetId];
+
+        if (compilation.assets[assetId]) {
+          const rawValue = compilation.assets[assetId].children[0]._value;
+          compilation.assets[assetId].children[0]._value = rawValue.replace(this.opitons.libraryName, moduleMap.id + "_" + moduleMap.version);
+        }
+      }
+    });
+  }
+}
+
+///
+// Removes *.module.scss.ts on the first execution in order prevent conflicts with *.module.scss.d.ts
+// generated by css-modules-typescript-loader
+///
+class ClearCssModuleDefinitionsPlugin {
+  constructor(options) {
+    this.options = options || {};
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap("FixStylesPlugin", stats => {
+      if (!this.options.deleted) {
+
+        setTimeout(() => {
+          del.sync(["src/**/*.module.scss.ts"]);
+        }, 3000);
+
+        this.options.deleted = true;
+      }
+    });
+  }
+}
+
+let baseConfig = {
+  target: "web",
+  mode: "development",
+  devtool: "source-map",
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"],
+    modules: ["node_modules"]
+  },
+  context: path.resolve(__dirname),
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: "ts-loader",
+        options: {
+          transpileOnly: true,
+          compilerOptions: {
+            declarationMap: false
+          }
+        },
+        exclude: /node_modules/
+      },
+      {
+        use: [{
+          loader: "@microsoft/loader-cased-file",
+          options: {
+            name: "[name:lower]_[hash].[ext]"
+          }
+        }],
+        test: /\.(jpe?g|png|woff|eot|ttf|svg|gif|dds)$/i
+      },
+      {
+        use: [{
+          loader: "html-loader"
+        }],
+        test: /\.html$/
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          {
+            loader: "css-loader"
+          }
+        ]
+      },
+      {
+        test: function (fileName) {
+          return fileName.endsWith(".module.scss");   // scss modules support
+        },
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          "css-modules-typescript-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                localIdentName: "[local]_[hash:base64:8]"
+              }
+            }
+          }, // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS, using Node Sass by default
+        ]
+      },
+      {
+        test: function (fileName) {
+          return !fileName.endsWith(".module.scss") && fileName.endsWith(".scss");  // just regular .scss
+        },
+        use: [
+          {
+            loader: "@microsoft/loader-load-themed-styles",
+            options: {
+              async: true
+            }
+          },
+          "css-loader", // translates CSS into CommonJS
+          "sass-loader" // compiles Sass to CSS, using Node Sass by default
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new ForkTsCheckerWebpackPlugin({
+      tslint: true
+    }),
+    new ClearCssModuleDefinitionsPlugin(),
+    new webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+      "process.env.DEBUG": JSON.stringify(true),
+      "DEBUG": JSON.stringify(true)
+    })],
+  devServer: {
+    hot: false,
+    contentBase: resolve(__dirname),
+    publicPath: host + "/dist/",
+    host: "localhost",
+    port: port,
+    disableHostCheck: true,
+    historyApiFallback: true,
+    open: true,
+    writeToDisk: false,
+    openPage: host + "/temp/workbench.html",
+    stats: {
+      preset: "errors-only",
+      colors: true,
+      chunks: false,
+      modules: false,
+      assets: false
+    },
+    proxy: { // url re-write for resources to be served directly from src folder
+      "/lib/**/loc/*.js": {
+        target: host,
+        pathRewrite: { "^/lib": "/src" },
+        secure: false
+      }
+    },
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    https: {
+      cert: CertificateStore.instance.certificateData,
+      key: CertificateStore.instance.keyData
+    }
+  },
+}
+
+const createConfig = function () {
+  // remove old css module TypeScript definitions
+  del.sync(["dist/*.js", "dist/*.map"]);
+
+  // we need only "externals", "output" and "entry" from the original webpack config
+  let originalWebpackConfig = require("./temp/_webpack_config.json");
+  baseConfig.externals = originalWebpackConfig.externals;
+  baseConfig.output = originalWebpackConfig.output;
+
+  baseConfig.entry = getEntryPoints(originalWebpackConfig.entry);
+
+  baseConfig.output.publicPath = host + "/dist/";
+
+  const manifest = require("./temp/manifests.json");
+  const modulesMap = {};
+  const originalEntries = Object.keys(originalWebpackConfig.entry);
+
+  for (const jsModule of manifest) {
+    if (jsModule.loaderConfig
+      && jsModule.loaderConfig.entryModuleId
+      && originalEntries.indexOf(jsModule.loaderConfig.entryModuleId) !== -1) {
+      modulesMap[jsModule.loaderConfig.entryModuleId + ".js"] = {
+        id: jsModule.id,
+        version: jsModule.version
+      }
+    }
+  }
+
+  baseConfig.plugins.push(new DynamicLibraryPlugin({
+    modulesMap: modulesMap,
+    libraryName: originalWebpackConfig.output.library
+  }));
+
+  return baseConfig;
+}
+
+function getEntryPoints(entry) {
+  // fix: ".js" entry needs to be ".ts"
+  // also replaces the path form /lib/* to /src/*
+  let newEntry = {};
+  let libSearchRegexp;
+  if (path.sep === "/") {
+    libSearchRegexp = /\/lib\//gi;
+  } else {
+    libSearchRegexp = /\\lib\\/gi;
+  }
+
+  const srcPathToReplace = path.sep + "src" + path.sep;
+
+  for (const key in entry) {
+    let entryPath = entry[key];
+    if (entryPath.indexOf("bundle-entries") === -1) {
+      entryPath = entryPath.replace(libSearchRegexp, srcPathToReplace).slice(0, -3) + ".ts";
+    } else {
+      // replace paths and extensions in bundle file
+      let bundleContent = fs.readFileSync(entryPath).toString();
+      bundleContent = bundleContent.replace(libSearchRegexp, srcPathToReplace).replace(/\.js/gi, ".ts");
+      fs.writeFileSync(entryPath, bundleContent);
+    }
+    newEntry[key] = entryPath;
+  }
+
+  return newEntry;
+}
+
+module.exports = createConfig();
				`@ -0,0 +1 @@`
				`{"preset":"@voitanos/jest-preset-spfx-react16","rootDir":"../src","collectCoverageFrom":["<rootDir>/*/.{ts,tsx}","!<rootDir>/*/.scss.","!<rootDir>/loc//.*"],"coverageReporters":["text","json","lcov","text-summary","cobertura"],"reporters":["default",["jest-junit",{"suiteName":"jest tests","outputDirectory":"temp/test/junit","outputName":"junit.xml"}]]}`
				`@ -0,0 +1 @@`
				`// A file is required to be in the root of the /src directory by the TypeScript compiler`