add web part (#767)

samples/workbench-customizer/.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

samples/workbench-customizer/.gitignore

@@ -0,0 +1,32 @@
+# 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

samples/workbench-customizer/.yo-rc.json

@@ -0,0 +1,11 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "packageManager": "pnpm",
+    "isCreatingSolution": true,
+    "environment": "spo",
+    "version": "1.7.1",
+    "libraryName": "workbench-customizer",
+    "libraryId": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
+    "componentType": "webpart"
+  }
+}

samples/workbench-customizer/README.md

@@ -0,0 +1,47 @@
+# React Visio Embed
+
+## Summary
+
+This sample shows how the Workbench page can be customized to display in a way that better mimics a modern SharePoint page.
+This is done using CSS overrides on some of the page styles, which does not cause any negative impact on your site as the web part is not intended to be consumed by final users, only developers.
+The web part also has some properties that control which customizations are applied to the workbench page (all enabled by default).
+
+![Demo](./assets/Preview.png)
+
+## Used SharePoint Framework Version
+
+![drop](https://img.shields.io/badge/drop-1.7.1-green.svg)
+
+## Applies to
+
+* [SharePoint Framework](https:/dev.office.com/sharepoint)
+
+## Prerequisites
+
+* Office 365 subscription with SharePoint Online licence
+* SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+workbench-customizer|Joel Rodrigues
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|January 24, 2019|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
+* in the command line run:
+  * `npm install`
+  * `gulp serve`

samples/workbench-customizer/config/config.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "workbench-customizer-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.js",
+          "manifest": "./src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+    "WorkbenchCustomizerWebPartStrings": "lib/webparts/workbenchCustomizer/loc/{locale}.js"
+  }
+}

samples/workbench-customizer/config/copy-assets.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/copy-assets.schema.json",
+  "deployCdnPath": "temp/deploy"
+}

samples/workbench-customizer/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": "workbench-customizer",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/workbench-customizer/config/package-solution.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "workbench-customizer-client-side-solution",
+    "id": "5d6f4a5a-9d2b-4a93-a283-16b8f5ea75d6",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "skipFeatureDeployment": true
+  },
+  "paths": {
+    "zippedPackage": "solution/workbench-customizer.sppkg"
+  }
+}

samples/workbench-customizer/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/"
+  }
+}

samples/workbench-customizer/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 -->"
+}

samples/workbench-customizer/gulpfile.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const gulp = require('gulp');
+const build = require('@microsoft/sp-build-web');
+build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
+
+build.initialize(gulp);

samples/workbench-customizer/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "workbench-customizer",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "@microsoft/sp-core-library": "1.7.1",
+    "@microsoft/sp-lodash-subset": "1.7.1",
+    "@microsoft/sp-office-ui-fabric-core": "1.7.1",
+    "@microsoft/sp-webpart-base": "1.7.1",
+    "@types/es6-promise": "0.0.33",
+    "@types/webpack-env": "1.13.1",
+    "npm": "^6.7.0"
+  },
+  "devDependencies": {
+    "@microsoft/sp-build-web": "1.7.1",
+    "@microsoft/sp-tslint-rules": "1.7.1",
+    "@microsoft/sp-module-interfaces": "1.7.1",
+    "@microsoft/sp-webpart-workbench": "1.7.1",
+    "gulp": "~3.9.1",
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "ajv": "~5.2.2"
+  }
+}

samples/workbench-customizer/src/index.ts

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

samples/workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.manifest.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "19882113-30db-44bd-8ed7-15c951fc2323",
+  "alias": "WorkbenchCustomizerWebPart",
+  "componentType": "WebPart",
+
+  // 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,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "Workbench Customizer" },
+    "description": { "default": "Workbench Customizer web part to configure workbench page styles" },
+    "officeFabricIconFontName": "DeveloperTools",
+    "properties": {
+      "requiresPageRefresh": false,
+      "maxWidth": true,
+      "centerCanvas": true,
+      "overflow": true,
+      "padding": true
+    }
+  }]
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.module.scss

@@ -0,0 +1,6 @@
+@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+.workbenchCustomizer {
+    .redMessage {
+      color: red;
+    }
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/WorkbenchCustomizerWebPart.ts

@@ -0,0 +1,97 @@
+import { Version } from '@microsoft/sp-core-library';
+import {
+  BaseClientSideWebPart,
+  IPropertyPaneConfiguration,
+  PropertyPaneToggle
+} from '@microsoft/sp-webpart-base';
+import styles from './WorkbenchCustomizerWebPart.module.scss';
+import { escape } from '@microsoft/sp-lodash-subset';
+
+import * as strings from 'WorkbenchCustomizerWebPartStrings';
+
+export interface IWorkbenchCustomizerWebPartProps {
+  requiresPageRefresh: boolean;
+  maxWidth: boolean;
+  centerCanvas: boolean;
+  overflow: boolean;
+  padding: boolean;
+}
+
+export default class WorkbenchCustomizerWebPart extends BaseClientSideWebPart<IWorkbenchCustomizerWebPartProps> {
+
+  public onInit(): Promise<void> {
+    this.properties.requiresPageRefresh = false;
+    return Promise.resolve();
+  }
+
+  public async render(): Promise<void> {
+
+    if (this.properties.maxWidth) {
+      await import('./styles/maxWidth.module.scss');
+    }
+    if (this.properties.centerCanvas) {
+      await import('./styles/centerCanvas.module.scss');
+    }
+    if (this.properties.overflow) {
+      await import('./styles/overflow.module.scss');
+    }
+    if (this.properties.padding) {
+      await import('./styles/padding.module.scss');
+    }
+
+    this.domElement.innerHTML = `
+    <div class="${styles.workbenchCustomizer}">
+      ${this.properties.requiresPageRefresh
+        ? `<div class="${styles.redMessage}">Please refresh the page to update workbench styles</div>`
+        : ''
+      }
+      <div>Max width enabled: ${this.properties.maxWidth}</div>
+      <div>Center canvas zone: ${this.properties.centerCanvas}</div>
+      <div>Custom overflow enabled: ${this.properties.overflow}</div>
+      <div>Custom padding enabled: ${this.properties.padding}</div>
+    </div>`;
+  }
+
+  public onPropertyPaneFieldChanged(path: string, oldValue: any, newValue: any): void {
+    if (!newValue) {
+      // request a page refresh if any of the options was disabled
+      // no real smart logic implemented at this point
+      this.properties.requiresPageRefresh = true;
+    }
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneToggle('maxWidth', {
+                  label: strings.MaxWidthFieldLabel
+                }),
+                PropertyPaneToggle('centerCanvas', {
+                  label: strings.CenterCanvasFieldLabel
+                }),
+                PropertyPaneToggle('overflow', {
+                  label: strings.OverflowFieldLabel
+                }),
+                PropertyPaneToggle('padding', {
+                  label: strings.PaddingFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/loc/en-us.js

@@ -0,0 +1,10 @@
+define([], function() {
+  return {
+    "PropertyPaneDescription": "Description",
+    "BasicGroupName": "Configuration",
+    "MaxWidthFieldLabel": "Enable custom max width",
+    "CenterCanvasFieldLabel": "Center canvas",
+    "OverflowFieldLabel": "Enable custom overflow",
+    "PaddingFieldLabel": "Enable custom padding"
+  }
+});

samples/workbench-customizer/src/webparts/workbenchCustomizer/loc/mystrings.d.ts

@@ -0,0 +1,13 @@
+declare interface IWorkbenchCustomizerWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  MaxWidthFieldLabel: string;
+  CenterCanvasFieldLabel: string;
+  OverflowFieldLabel: string;
+  PaddingFieldLabel: string;
+}
+
+declare module 'WorkbenchCustomizerWebPartStrings' {
+  const strings: IWorkbenchCustomizerWebPartStrings;
+  export = strings;
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/styles/centerCanvas.module.scss

@@ -0,0 +1,9 @@
+:global #workbenchPageContent {
+    .CanvasComponent {
+        .CanvasZoneContainer {
+            .CanvasZone {
+                margin: auto;
+            }
+        }
+    }
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/styles/maxWidth.module.scss

@@ -0,0 +1,6 @@
+:global #workbenchPageContent {
+    // max-width: 1316px;
+    max-width: 100%;
+    left: 0;
+    right: 0;
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/styles/overflow.module.scss

@@ -0,0 +1,10 @@
+:global #workbenchPageContent {
+    &>div {
+        &>div {
+            overflow: visible;
+            &>div {
+                overflow: visible;
+            }
+        }
+    }
+}

samples/workbench-customizer/src/webparts/workbenchCustomizer/styles/padding.module.scss

@@ -0,0 +1,16 @@
+:global #workbenchPageContent {
+    &>div {
+        &>div {
+            &>div {
+                padding: 0;
+                .CanvasComponent {
+                    .CanvasZoneContainer {
+                        .CanvasZone {
+                            padding-left: 24px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

samples/workbench-customizer/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "outDir": "lib",
+    "typeRoots": [
+      "./node_modules/@types",
+      "./node_modules/@microsoft"
+    ],
+    "types": [
+      "es6-promise",
+      "webpack-env"
+    ],
+    "lib": [
+      "es5",
+      "dom",
+      "es2015.collection"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}

samples/workbench-customizer/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-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
+  }
+}