new webpart react-organisation-chart

samples/react-organisation-chart/README.md

@@ -0,0 +1,62 @@
+# react-organisation-chart
+
+## Summary
+
+This WebPart Show Organisation Chart based on specified user, and user can navigate to show company organisation, this Web Part can be installed on SharePoint Server 2019,
+
+
+![Organisation Chart](./assets/orgchart_02.jpg)
+
+![Organisation Chart](./assets/orgchart_01.jpg)
+
+![Organisation Chart](./assets/orgchart.gif)
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.4.1-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+
+
+## Prerequisites
+
+> Any special pre-requisites?
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+react-organisation-chart |João Mendes, Storm Technolog, twwiter @joaojmendes
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|May, 2021|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
+- Ensure that you are at the solution folder
+- in the command-line run:
+  - **npm install**
+  - **gulp serve**
+
+> Include any additional steps as needed.
+
+## Features
+
+This WebPart show how to use PnPjs, Office-ui-fabric-react to create a Organisation Chart
+
+This extension illustrates the following concepts:
+ 
+
+ 

samples/react-organisation-chart/gulpfile.js

@@ -11,13 +11,9 @@ build.addSuppression(/Warning - \[sass\] The local CSS class .* is not camelCase
 const typeScriptConfig = require('@microsoft/gulp-core-build-typescript/lib/TypeScriptConfiguration');
 typeScriptConfig.TypeScriptConfiguration.setTypescriptCompiler(require('typescript'));
 
-
-
-
+// disable tslint
 build.tslint.enabled = false;
 
-
-
 const eslint = require('gulp-eslint');
 
 const eslintSubTask = build.subTask('eslint', function (gulp, buildOptions, done) {
@@ -34,25 +30,6 @@ const eslintSubTask = build.subTask('eslint', function (gulp, buildOptions, done
 });
 
 build.rig.addPreBuildTask(build.task('eslint-task', eslintSubTask));
-
-/* build.configureWebpack.setConfig({
-  additionalConfiguration: function (config) {
-    let newConfig = config;
-    config.plugins.forEach((plugin, i) => {
-      if (plugin.options && plugin.options.mangle) {
-        config.plugins.splice(i, 1);
-        newConfig = merge(config, {
-          plugins: [
-            new TerserPlugin()
-          ]
-        });
-      }
-    });
-
-    return newConfig;
-  }
-}); */
-
 // force use of projects specified react version
 build.configureWebpack.mergeConfig({
 
@@ -60,9 +37,6 @@ build.configureWebpack.mergeConfig({
     // force use of projects specified react version
       generatedConfiguration.externals = generatedConfiguration.externals
           .filter(name => !(["react", "react-dom"].includes(name)));
-         /*  generatedConfiguration.externals = generatedConfiguration.externals
-          .filter(name => !(["@fluentui/react"].includes(name))); */
-
 // force use TerserPlugIn (remove UglifyJs)
           generatedConfiguration.plugins.forEach((plugin, i) => {
             if (plugin.options && plugin.options.mangle) {
@@ -77,7 +51,6 @@ build.configureWebpack.mergeConfig({
           });
           return generatedConfiguration;
   }
-
 });
 
 

samples/react-organization-chart/README.md

@@ -1,73 +0,0 @@
-# react-organization-chart
-
-## Summary
-
-Short summary on functionality and used technologies.
-
-[picture of the solution in action, if possible]
-
-## Used SharePoint Framework Version
-
-![version](https://img.shields.io/badge/version-1.12-green.svg)
-
-## Applies to
-
-- [SharePoint Framework](https://aka.ms/spfx)
-- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
-
-> Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
-
-## Prerequisites
-
-> Any special pre-requisites?
-
-## Solution
-
-Solution|Author(s)
---------|---------
-folder name | Author details (name, company, twitter alias with link)
-
-## Version history
-
-Version|Date|Comments
--------|----|--------
-1.1|March 10, 2021|Update comment
-1.0|January 29, 2021|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
-- Ensure that you are at the solution folder
-- in the command-line run:
-  - **npm install**
-  - **gulp serve**
-
-> Include any additional steps as needed.
-
-## Features
-
-Description of the extension that expands upon high-level summary above.
-
-This extension illustrates the following concepts:
-
-- topic 1
-- topic 2
-- topic 3
-
-> Notice that better pictures and documentation will increase the sample usage and the value you are providing for others. Thanks for your submissions advance.
-
-> Share your web part with others through Microsoft 365 Patterns and Practices program to get visibility and exposure. More details on the community, open-source projects and other activities from http://aka.ms/m365pnp.
-
-## References
-
-- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
-- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
-- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
-- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
-- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development