Add files via upload

samples/react-world-clocks/README.md

@@ -0,0 +1,77 @@
+# World Clocks Web Part
+
+## Summary
+
+- This sample is extension of the single World time clock sample that was provided in SP Starter Kit.
+- This web part use SharePoint List to Show multiple Clocks.
+- Each clock item can have Name, Timezone and status (Active, Yes/No).
+- The webpart properties will allow you to enter Web Part Title and select a List.
+- The webpart properties will allow you to show or hide time.
+- You can show or hide clocks by setting the status to active or inactive.
+- The web part does not update automatically. [Someone need to make the React Tick :)]
+
+![Web Part](./assets/WebPart.png)
+
+### Web Part in Action
+
+![Web Part in Action](./assets/ClocksInAction.gif)
+
+### Usage
+
+**1) Create or use a list for World Clocks. The List should have the following Columns:**
+
+- Title, GMTValues, ListOrder, IsActive.
+
+![Create list for use with the World Clocks](./assets/WorldClockList.png)
+
+- ![World Clocks list Template for use with the Web Part](./assets/WorldClock.stp)
+- ![World Clocks Site Script  use with the Web Part](./assets/WorldClock.json)
+
+**2) Add the World Clocks web part to your page & Enter Title, Select List. You can also enable the other required settings.**
+
+## Used SharePoint Framework Version
+
+![1.11.0](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)
+
+## Prerequisites
+
+- A package is available for direct download.
+
+## Prerequisites
+
+Please create the list as described above
+
+## Solution
+
+| Solution              | Author(s)                                |
+| --------------------- | ---------------------------------------- |
+| World Clocks Web Part | [Jerry Yasir](https://github.com/jyasir) |
+
+## Version history
+
+| Version | Date               | Comments      |
+| ------- | ------------------ | ------------- |
+| 1.0     | September 26, 2020 | First Version |
+
+## 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 or download this repository
+- Run in command line:
+  - `npm install` to install the npm dependencies
+  - `gulp serve` to display in Developer Workbench (recommend using your tenant workbench so you can test with real lists within your site)
+- To package and deploy:
+  - Use `gulp bundle --ship` & `gulp package-solution --ship`
+  - Add the `.sppkg` to your SharePoint App Catalog
+
+<img src="https://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/react-world-clocks" />

samples/react-world-clocks/gulpfile.js

@@ -0,0 +1,29 @@
+'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
+ */
+
+
+build.initialize(gulp);

samples/react-world-clocks/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "world-clock",
+  "version": "0.0.1",
+  "private": true,
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "scripts": {
+    "build": "gulp bundle",
+    "clean": "gulp clean",
+    "test": "gulp test",
+    "preversion": "node ./tools/pre-version.js",
+    "postversion": "gulp dist"
+  },
+  "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",
+    "moment-timezone": "^0.5.31",
+    "office-ui-fabric-react": "6.214.0",
+    "react": "16.8.5",
+    "react-analog-clock": "^2.1.0",
+    "react-dom": "16.8.5",
+    "react-moment": "^0.9.7"
+  },
+  "devDependencies": {
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
+    "@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.8.8",
+    "@types/react-dom": "16.8.3",
+    "@types/webpack-env": "1.13.1",
+    "ajv": "~5.2.2",
+    "analog-clock-react": "^1.2.0",
+    "gulp": "~3.9.1",
+    "gulp-sequence": "1.0.0",
+    "react-live-clock": "5.0.1"
+  }
+}

samples/react-world-clocks/src/index.ts

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

samples/react-world-clocks/src/webparts/worldClockWebPart/WorldClockWebPartWebPart.manifest.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
+  "id": "6baae7a7-af13-40d3-9567-f3bca9986248",
+  "alias": "WorldClockWebPartWebPart",
+  "componentType": "WebPart",
+
+  "version": "*",
+  "manifestVersion": 2,
+
+  "requiresCustomScript": false,
+  "supportedHosts": ["SharePointWebPart"],
+
+  "preconfiguredEntries": [{
+    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
+    "group": {
+      "default": "Other"
+    },
+    "title": {
+      "default": "WorldClocksWebPart"
+    },
+    "description": {
+      "default": "World Clocks Web Part"
+    },
+    "officeFabricIconFontName": "Page",
+    "properties": {
+      "description": "World Clocks WebPart"
+    }
+  }]
+}

samples/react-world-clocks/src/webparts/worldClockWebPart/WorldClockWebPartWebPart.ts

@@ -0,0 +1,170 @@
+import * as React from "react";
+import * as ReactDom from "react-dom";
+import { Version } from "@microsoft/sp-core-library";
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+
+import {
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField,
+  PropertyPaneToggle,
+  PropertyPaneDropdown,
+  IPropertyPaneDropdownOption,
+} from "@microsoft/sp-property-pane";
+
+import * as strings from "WorldClockWebPartWebPartStrings";
+import WorldClockWebPart from "./components/WorldClockWebPart";
+import {
+  IWorldClockWebPartProps,
+  ILocation,
+} from "./components/IWorldClockWebPartProps";
+
+export interface IWorldClockWebPartWebPartProps {
+  selectedList: string;
+  description: string;
+  ShowTime: boolean;
+  showActiveOnly: boolean;
+  showTitle: boolean;
+}
+import { sp } from "@pnp/sp/presets/all";
+
+import {
+  PropertyFieldListPicker,
+  PropertyFieldListPickerOrderBy,
+} from "@pnp/spfx-property-controls/lib/PropertyFieldListPicker";
+import { groupOne } from "office-ui-fabric-react";
+
+export default class WorldClockWebPartWebPart extends BaseClientSideWebPart<
+  IWorldClockWebPartWebPartProps
+> {
+  public render(): void {
+    const element: React.ReactElement<IWorldClockWebPartProps> = React.createElement(
+      WorldClockWebPart,
+      {
+        selectedList: this.properties.selectedList,
+        description: this.properties.description,
+        loadLocations: this._getLocations.bind(this),
+        ShowTime: this.properties.ShowTime,
+        showActiveOnly: this.properties.showActiveOnly,
+        showTitle: this.properties.showTitle,
+        updateProperty: (value: string) => {
+          this.properties.description = value;
+        },
+        displayMode: this.displayMode,
+        onConfigure: () => {
+          this.context.propertyPane.open();
+        },
+      }
+    );
+
+    ReactDom.render(element, this.domElement);
+  }
+
+  public onInit(): Promise<void> {
+    return super.onInit().then((_) => {
+      sp.setup({
+        spfxContext: this.context,
+      });
+    });
+  }
+
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
+  //  protected get disableReactivePropertyChanges(): boolean {
+  //    return true;
+  //  }
+
+  protected get dataVersion(): Version {
+    return Version.parse("1.0");
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription,
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField("description", {
+                  label: strings.DescriptionFieldLabel,
+                }),
+                PropertyFieldListPicker("selectedList", {
+                  label: "Select a list",
+                  selectedList: this.properties.selectedList,
+                  includeHidden: false,
+                  orderBy: PropertyFieldListPickerOrderBy.Title,
+                  disabled: false,
+                  webAbsoluteUrl: this.context.pageContext.web.absoluteUrl,
+                  onPropertyChange: this.onPropertyPaneFieldChanged.bind(this),
+                  properties: this.properties,
+                  context: this.context,
+                  onGetErrorMessage: null,
+                  deferredValidationTime: 0,
+                  key: "listPickerFieldId",
+                }),
+              ],
+            },
+            {
+              groupName: strings.BasicViewGroupName,
+              groupFields: [
+                PropertyPaneToggle("ShowTime", {
+                  label: strings.IsShowTimeFieldLabel,
+                  checked: this.properties.ShowTime,
+                  key: "ShowTime",
+                }),
+                PropertyPaneToggle("showActiveOnly", {
+                  label: strings.ShowActiveOnlyFieldLabel,
+                  checked: this.properties.showActiveOnly,
+                  key: "togshowActiveOnly",
+                }),
+                ,
+                PropertyPaneToggle("showTitle", {
+                  label: strings.showTitleFieldLabel,
+                  checked: this.properties.showTitle,
+                  key: "togshowTitle",
+                }),
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  }
+  private _getLocations(): Promise<ILocation[]> {
+    //console.log(this.properties);
+    //"World Clocks"
+    // debugger;
+    //console.log('__');
+    //console.log(this.context.pageContext.web.absoluteUrl);
+    //console.log(this.properties);
+
+    //let webLocation = new this.sp.web pnp.c(this.context.pageContext.web.absoluteUrl);
+    let filter: string = "";
+    console.log(this.properties.showActiveOnly);
+    if (this.properties.showActiveOnly) {
+      filter = "IsActive eq 1";
+    } else {
+      filter = "";
+    }
+
+    return sp.web.lists
+      .getById(this.properties.selectedList)
+      .items.filter(filter)
+      .select("Title", "GMTValues")
+      .orderBy("ListOrder")
+      .get()
+      .then((Locations) => {
+        return Locations;
+      })
+      .catch((error) => {
+        console.log("error loading all location....");
+        console.log(error);
+        return [];
+      });
+  }
+}

samples/react-world-clocks/src/webparts/worldClockWebPart/components/IWorldClockWebPartProps.ts

@@ -0,0 +1,21 @@
+import { DisplayMode } from "@microsoft/sp-core-library";
+
+export interface IWorldClockWebPartProps {
+  selectedList: string;
+  description: string;
+  loadLocations: () => Promise<ILocation[]>;
+  ShowTime: boolean;
+  showActiveOnly: boolean;
+  showTitle: boolean;
+  displayMode: DisplayMode;
+  updateProperty: (value: string) => void;
+  onConfigure: () => void;
+}
+
+export interface ILocation {
+  Title?: string;
+  GMTValues?: number;
+}
+export interface IWorldClockWebPartState {
+  clocks?: any[];
+}

samples/react-world-clocks/src/webparts/worldClockWebPart/components/WorldClockWebPart.module.scss

@@ -0,0 +1,100 @@
+@import '~office-ui-fabric-react/dist/sass/References.scss';
+
+.worldClockWebPart {
+  .container {
+    margin: 0px auto;
+    /*background-color: #d8d8da;*/
+    padding: 10px;
+    display: table;
+  }
+
+  .Clock {
+    float: left;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .Clock>div {
+    -webkit-box-sizing: unset;
+    /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: unset;
+    /* Firefox, other Gecko */
+    box-sizing: unset;
+    /* Opera/IE 8+ */
+  }
+
+  .ClockTitle {
+    text-align: center;
+    margin: 5px;
+    font-size: 13px;
+    font-weight: bold;
+    font-family: "Segoe UI Web (West European)", Segoe UI, -apple-system,
+      BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
+  }
+
+  .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;
+    }
+  }
+}

samples/react-world-clocks/src/webparts/worldClockWebPart/components/WorldClockWebPart.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+import styles from "./WorldClockWebPart.module.scss";
+import {
+  IWorldClockWebPartProps,
+  ILocation,
+  IWorldClockWebPartState,
+} from "./IWorldClockWebPartProps";
+import { escape } from "@microsoft/sp-lodash-subset";
+import AnalogClock, { Themes } from "react-analog-clock";
+import Clock from "react-live-clock";
+import moment from "moment";
+import { SPComponentLoader } from "@microsoft/sp-loader";
+
+import { Placeholder } from "@pnp/spfx-controls-react/lib/Placeholder";
+import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
+
+import { memoizeFunction } from "office-ui-fabric-react";
+
+export default class WorldClockWebPart extends React.Component<
+  IWorldClockWebPartProps,
+  IWorldClockWebPartState
+> {
+  private clocks = [];
+  private TitleText: string = "";
+  constructor(props: IWorldClockWebPartProps, state: IWorldClockWebPartState) {
+    super(props);
+    this.state = { clocks: [] };
+  }
+  public componentDidMount() {
+    const dayTheme = {
+      background: "#ededed",
+      border: "#222222",
+      center: "#222222",
+      seconds: "transparent",
+      minutes: "#000",
+      hour: "#000",
+      tick: "#000",
+      smallTickWidth: 1,
+      largeTickWidth: 1,
+      secondHandWidth: 1,
+      minuteHandWidth: 1,
+      hourHandWidth: 1,
+    };
+    const eveningTheme = {
+      background: "#A9A9A9",
+      border: "#868181",
+      center: "#DCDCDC",
+      seconds: "transparent",
+      minutes: "#000000",
+      hour: "#000000",
+      tick: "#000000",
+      smallTickWidth: 1,
+      largeTickWidth: 1,
+      secondHandWidth: 1,
+      minuteHandWidth: 1,
+      hourHandWidth: 1,
+    };
+    const nightTheme = {
+      background: "#2e2e2e",
+      border: "#868181",
+      center: "#acabab",
+      seconds: "transparent",
+      minutes: "#acabab",
+      hour: "#acabab",
+      tick: "#acabab",
+      smallTickWidth: 1,
+      largeTickWidth: 1,
+      secondHandWidth: 1,
+      minuteHandWidth: 1,
+      hourHandWidth: 1,
+    };
+    const WIDTH = 100;
+
+    this.props.loadLocations().then((options) => {
+      console.log(options);
+      for (let i = 0; i < options.length; i++) {
+        let myDate: any = new Date().setHours(
+          new Date().getHours() +
+            new Date().getTimezoneOffset() / 60 +
+            Number(options[i].GMTValues)
+        );
+
+        let TimeofDay = moment(myDate).format("hh:mm A");
+        let selectedTheme = null;
+        var time = new Date(myDate).getHours();
+        {
+          let timeOfDayMessage: string = "";
+          if (time > 4 && time < 18) {
+            timeOfDayMessage = "is having a great day Today.";
+            selectedTheme = dayTheme;
+          } else if (time >= 18 && time < 21) {
+            timeOfDayMessage = "is having a great evening right Now.";
+            selectedTheme = eveningTheme;
+          } else {
+            timeOfDayMessage = "is all Good Night right now!";
+            selectedTheme = nightTheme;
+          }
+          this.clocks.push(
+            <span
+              className={styles.Clock}
+              title={
+                "Current Time in " +
+                options[i].Title +
+                " (GMT" +
+                options[i].GMTValues +
+                ") is " +
+                TimeofDay +
+                " and it " +
+                timeOfDayMessage
+              }
+            >
+              <AnalogClock
+                //theme={time > 6 && time < 18 ? dayTheme : nightTheme}
+                theme={selectedTheme}
+                gmtOffset={options[i].GMTValues}
+                showSmallTicks={false}
+                width={WIDTH}
+                interval={1}
+              />
+              {this.props.ShowTime ? (
+                <p
+                  className={styles.ClockTitle}
+                  title={
+                    "Current Time in " +
+                    options[i].Title +
+                    " (GMT" +
+                    options[i].GMTValues +
+                    ") is " +
+                    TimeofDay
+                  }
+                >
+                  <Clock
+                    date={myDate}
+                    format={"hh:mm:ss"}
+                    interval={1000}
+                    ticking={true}
+                  />
+                </p>
+              ) : (
+                <div />
+              )}
+              <p className={styles.ClockTitle}>{options[i].Title}</p>
+            </span>
+          );
+        }
+      }
+      this.setState({ clocks: this.clocks });
+    });
+  }
+  public render(): React.ReactElement<IWorldClockWebPartProps> {
+    const WIDTH = 250;
+    const showTitle: boolean = this.props.showTitle;
+    const listSelected: boolean =
+      typeof this.props.selectedList !== "undefined" &&
+      this.props.selectedList.length > 0;
+
+    return (
+      <div className={styles.worldClockWebPart}>
+        {!listSelected && (
+          <Placeholder
+            iconName="MusicInCollectionFill"
+            iconText="Configure your web part"
+            description="Select the already imported Clocks list and choose other settings."
+            buttonLabel="Choose a List"
+            onConfigure={this.props.onConfigure}
+          />
+        )}
+        {showTitle && (
+          <WebPartTitle
+            title={this.props.description}
+            displayMode={this.props.displayMode}
+            updateProperty={this.props.updateProperty}
+          />
+        )}
+        <div className={styles.container}>{this.clocks}</div>
+      </div>
+    );
+  }
+}

samples/react-world-clocks/src/webparts/worldClockWebPart/loc/en-us.js

@@ -0,0 +1,12 @@
+define([], function () {
+  return {
+    PropertyPaneDescription: "Basic Web Part Properties",
+    BasicGroupName: "Base Properties",
+    BasicViewGroupName: "View Properties",
+    DescriptionFieldLabel: "Clocks Title",
+    showTitleFieldLabel: "Show Title",
+    ListNameFieldLabel: "Select Clocks List",
+    IsShowTimeFieldLabel: "Show Time",
+    ShowActiveOnlyFieldLabel: "Show Active Clocks"
+  };
+});

samples/react-world-clocks/src/webparts/worldClockWebPart/loc/mystrings.d.ts

@@ -0,0 +1,15 @@
+declare interface IWorldClockWebPartWebPartStrings {
+  PropertyPaneDescription: string;
+  BasicGroupName: string;
+  BasicViewGroupName: string;
+  DescriptionFieldLabel: string;
+  ListNameFieldLabel: String;
+  IsShowTimeFieldLabel: string;
+  ShowActiveOnlyFieldLabel: string;
+  showTitleFieldLabel: string;
+}
+
+declare module "WorldClockWebPartWebPartStrings" {
+  const strings: IWorldClockWebPartWebPartStrings;
+  export = strings;
+}

samples/react-world-clocks/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');
+
+}

samples/react-world-clocks/tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/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"
+    ],
+    "esModuleInterop": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ]
+}

samples/react-world-clocks/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
+  }
+}