Added section background examples

samples/section-backgrounds/.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/section-backgrounds/.yo-rc.json

@@ -0,0 +1,13 @@
+{
+  "@microsoft/generator-sharepoint": {
+    "plusBeta": true,
+    "isCreatingSolution": true,
+    "environment": "spo",
+    "version": "1.7.1",
+    "libraryName": "section-background",
+    "libraryId": "6e12f297-a6bf-43c8-98b3-250220ae905f",
+    "packageManager": "npm",
+    "isDomainIsolated": false,
+    "componentType": "webpart"
+  }
+}

samples/section-backgrounds/README.md

@@ -0,0 +1,53 @@
+# Supporting section backgrounds in your web parts
+
+## Summary
+These samples show how to implement support for section backgrounds in your web parts.
+
+There are 3 web parts in this solution showing how to implement support for a background and 1 web part that shows what the fallback scenario looks like.
+
+For more details on the implementation, check out the documentation at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/supporting-section-backgrounds
+
+## A basic web part
+This basic (no framework) web part implements support for backgrounds.
+
+![Basic Web Part](./assets/webpartexample1.png)
+
+In the 2 column section above we defined a background color and inserted the first example web part in the left column. It picks up the background color and uses the right foreground color for text.
+
+## A React based web part 
+This React based web part implements support for backgrounds, alike the basic the web part.
+
+![React Web Part](./assets/webpartexample2.png)
+
+## A web part using the Office UI Framework
+This web part implements a Office UI button which is inheriting its colors correctly from the theme
+
+![Office UI Component Web Part](./assets/webpartexample3.png)
+
+## Building the code
+
+- Clone the repository
+- ```npm install```
+- ```gulp build```
+- ```gulp serve --nobrowser```
+- Open a browser, navigate to the workbench (https://yourtenant.sharepoint.com/_layouts/workbench.aspx), add a section, change the background color and add the web parts.
+
+## Applies to
+
+* [SharePoint Framework](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
+* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+section-background-examples|Microsoft
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0.0|March 13, 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.**

samples/section-backgrounds/config/config.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/config.2.0.schema.json",
+  "version": "2.0",
+  "bundles": {
+    "basic-react-section-background-example-web-part": {
+      "components": [
+        {
+          "entrypoint": "./lib/webparts/basicReactSectionBackgroundExample/BasicReactSectionBackgroundExampleWebPart.js",
+          "manifest": "./src/webparts/basicReactSectionBackgroundExample/BasicReactSectionBackgroundExampleWebPart.manifest.json"
+        },
+        {
+          "entrypoint": "./lib/webparts/basicPlainSectionBackgroundExample/BasicPlainSectionBackgroundExampleWebPart.js",
+          "manifest": "./src/webparts/basicPlainSectionBackgroundExample/BasicPlainSectionBackgroundExampleWebPart.manifest.json"
+        },
+        {
+          "entrypoint": "./lib/webparts/basicPlainWithFallbackExample/BasicPlainWithFallbackExampleWebPart.js",
+          "manifest": "./src/webparts/basicPlainWithFallbackExample/BasicPlainWithFallbackExampleWebPart.manifest.json"
+        },
+        {
+          "entrypoint": "./lib/webparts/officeUIFabricSectionBackgroundExample/OfficeUIFabricSectionBackgroundExampleWebPart.js",
+          "manifest": "./src/webparts/officeUIFabricSectionBackgroundExample/OfficeUIFabricSectionBackgroundExampleWebPart.manifest.json"
+        }
+      ]
+    }
+  },
+  "externals": {},
+  "localizedResources": {
+  }
+}

samples/section-backgrounds/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/section-backgrounds/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": "section-background",
+  "accessKey": "<!-- ACCESS KEY -->"
+}

samples/section-backgrounds/config/package-solution.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
+  "solution": {
+    "name": "section-background-client-side-solution",
+    "id": "6e12f297-a6bf-43c8-98b3-250220ae905f",
+    "version": "1.0.0.0",
+    "includeClientSideAssets": true,
+    "isDomainIsolated": false
+  },
+  "paths": {
+    "zippedPackage": "solution/section-background.sppkg"
+  }
+}

samples/section-backgrounds/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/section-backgrounds/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/section-backgrounds/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/section-backgrounds/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "section-background",
+  "version": "0.0.1",
+  "private": true,
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test"
+  },
+  "dependencies": {
+    "office-ui-fabric-react": "6.0.0",
+    "react": "16.3.2",
+    "react-dom": "16.3.2",
+    "@types/react": "16.4.2",
+    "@types/react-dom": "16.0.5",
+    "@microsoft/sp-component-base": "1.7.1-plusbeta",
+    "@microsoft/sp-core-library": "1.7.1-plusbeta",
+    "@microsoft/sp-webpart-base": "1.7.1-plusbeta",
+    "@microsoft/sp-lodash-subset": "1.7.1-plusbeta",
+    "@microsoft/sp-office-ui-fabric-core": "1.7.1-plusbeta",
+    "@types/webpack-env": "1.13.1",
+    "@types/es6-promise": "0.0.33",
+    "@uifabric/utilities": "6.0.0"
+  },
+  "resolutions": {
+    "@types/react": "16.4.2"
+  },
+  "devDependencies": {
+    "@microsoft/sp-build-web": "1.7.1-plusbeta",
+    "@microsoft/sp-tslint-rules": "1.7.1-plusbeta",
+    "@microsoft/sp-module-interfaces": "1.7.1-plusbeta",
+    "@microsoft/sp-webpart-workbench": "1.7.1-plusbeta",
+    "gulp": "~3.9.1",
+    "@types/chai": "3.4.34",
+    "@types/mocha": "2.2.38",
+    "ajv": "~5.2.2"
+  }
+}

samples/section-backgrounds/src/index.ts

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

samples/section-backgrounds/src/webparts/basicPlainSectionBackgroundExample/BasicPlainSectionBackgroundExampleWebPart.manifest.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "30e558fb-1d1b-4c5d-9ee3-eb5fcdf2fe54",
+  "alias": "BasicPlainSectionBackgroundExample",
+  "componentType": "WebPart",
+
+  "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,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "BasicPlainSectionBackgroundExample" },
+    "description": { "default": "BasicPlainSectionBackgroundExample description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+    }
+  }]
+}

samples/section-backgrounds/src/webparts/basicPlainSectionBackgroundExample/BasicPlainSectionBackgroundExampleWebPart.ts

@@ -0,0 +1,40 @@
+import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme, ISemanticColors } from '@microsoft/sp-component-base';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+
+export default class BasicPlainSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
+  private readonly _textContent: string = 'This web part has support for section backgrounds and will inherit its background from the section';
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+
+  public render(): void {
+    // See https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
+    const semanticColors: Readonly<ISemanticColors> | undefined = this._themeVariant && this._themeVariant.semanticColors;
+
+    const style: string = ` style="color:${semanticColors.bodyText}"`;
+    this.domElement.innerHTML = `<p${'' || (this._themeProvider && style)}>${this._textContent}</p>`;
+  }
+
+  protected onInit(): Promise<void> {
+    // Consume the new ThemeProvider service
+    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);
+
+    return super.onInit();
+  }
+
+  /**
+   * 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();
+  }
+}

samples/section-backgrounds/src/webparts/basicPlainWithFallbackExample/BasicPlainWithFallbackExampleWebPart.manifest.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "12f07ee4-ffcf-40ce-ae8c-516c96ce36eb",
+  "alias": "BasicPlainWithFallbackExample",
+  "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": "BasicPlainWithFallbackExample" },
+    "description": { "default": "BasicPlainWithFallbackExample description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+    }
+  }]
+}

samples/section-backgrounds/src/webparts/basicPlainWithFallbackExample/BasicPlainWithFallbackExampleWebPart.ts

@@ -0,0 +1,10 @@
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+
+export default class BasicPlainSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
+  private readonly _textContent: string = 'This webpart has no support for section backgrounds and will fall back to the default behavior';
+
+  public render(): void {
+    this.domElement.innerHTML = `<p style="color: black">${this._textContent}</p>`;
+  }
+}

samples/section-backgrounds/src/webparts/basicReactSectionBackgroundExample/BasicReactSectionBackgroundExampleWebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "724a9a44-80c4-4e45-9e18-57e74fe79be8",
+  "alias": "BasicReactSectionBackgroundExample",
+  "componentType": "WebPart",
+
+  // Removes the fallback treatment
+  "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,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "BasicReactSectionBackgroundExample" },
+    "description": { "default": "BasicReactSectionBackgroundExample description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+    }
+  }]
+}

samples/section-backgrounds/src/webparts/basicReactSectionBackgroundExample/BasicReactSectionBackgroundExampleWebPart.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+import BasicSectionBackgroundExample, { IBasicSectionBackgroundExampleProps } from './components/BasicSectionBackgroundExample';
+
+export default class OUIFRSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+
+  public render(): void {
+    const element: React.ReactElement<IBasicSectionBackgroundExampleProps > = React.createElement(
+      BasicSectionBackgroundExample,
+      {
+        themeVariant: this._themeVariant
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected onInit(): Promise<void> {
+    // Consume the new ThemeProvider service
+    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);
+
+    return super.onInit();
+  }
+
+  /**
+   * 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();
+  }
+}

samples/section-backgrounds/src/webparts/basicReactSectionBackgroundExample/components/BasicSectionBackgroundExample.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+export interface IBasicSectionBackgroundExampleProps {
+  themeVariant: IReadonlyTheme | undefined;
+}
+
+export default class BasicSectionBackgroundExample extends React.Component<IBasicSectionBackgroundExampleProps, {}> {
+  public render(): React.ReactElement<IBasicSectionBackgroundExampleProps> {
+    // See https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
+    const { semanticColors }: IReadonlyTheme = this.props.themeVariant;
+
+    return (
+      <div style={{color: semanticColors.bodyText}}>
+        <p>This React web part has support for section backgrounds and will inherit its background from the section</p>
+      </div>
+    );
+  }
+}

samples/section-backgrounds/src/webparts/officeUIFabricSectionBackgroundExample/OfficeUIFabricSectionBackgroundExampleWebPart.manifest.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "45a39de7-057e-4d82-92bd-59eeeff65156",
+  "alias": "OfficeUIFabricSectionBackgroundExample",
+  "componentType": "WebPart",
+
+  // Removes the fallback treatment
+  "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,
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": { "default": "Other" },
+    "title": { "default": "OfficeUIFabricSectionBackgroundExample" },
+    "description": { "default": "OfficeUIFabricSectionBackgroundExample description" },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+    }
+  }]
+}

samples/section-backgrounds/src/webparts/officeUIFabricSectionBackgroundExample/OfficeUIFabricSectionBackgroundExampleWebPart.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { ThemeProvider, ThemeChangedEventArgs, IReadonlyTheme } from '@microsoft/sp-component-base';
+import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+
+import OfficeUIFabricSectionBackgroundExample, { IOfficeUIFabricSectionBackgroundExampleProps } from './components/OfficeUIFabricSectionBackgroundExample';
+
+export default class OfficeUIFabricSectionBackgroundExampleWebPart extends BaseClientSideWebPart<void> {
+  private _themeProvider: ThemeProvider;
+  private _themeVariant: IReadonlyTheme | undefined;
+
+  public render(): void {
+    const element: React.ReactElement<IOfficeUIFabricSectionBackgroundExampleProps > = React.createElement(
+      OfficeUIFabricSectionBackgroundExample,
+      {
+        themeVariant: this._themeVariant
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  protected onInit(): Promise<void> {
+    // Consume the new ThemeProvider service
+    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);
+
+    return super.onInit();
+  }
+
+  /**
+   * 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();
+  }
+}

samples/section-backgrounds/src/webparts/officeUIFabricSectionBackgroundExample/components/OfficeUIFabricSectionBackgroundExample.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Customizer } from '@uifabric/utilities/lib/Customizer';
+import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+export interface IOfficeUIFabricSectionBackgroundExampleProps {
+  themeVariant: IReadonlyTheme | undefined;
+}
+
+export default class OfficeUIFabricSectionBackgroundExample extends React.Component<IOfficeUIFabricSectionBackgroundExampleProps, {}> {
+  public render(): React.ReactElement<IOfficeUIFabricSectionBackgroundExampleProps> {
+
+    // Customizer will set a scoped theme for all OUIFR components that use `customizable` in the subtree
+    return (
+      <div>
+        <p>This web part implements an Office UI Framework component which inherits the background and correct colors</p>
+        <Customizer settings={{ theme: this.props.themeVariant }}>
+          <PrimaryButton>Click me</PrimaryButton>
+        </Customizer>
+      </div>
+    );
+  }
+}

samples/section-backgrounds/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/section-backgrounds/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
+  }
+}