Merge pull request #1328 from pnp/react-calendar-110

Upgraded to SPFx 1.10

samples/react-calendar/.stylelintrc

@@ -5,6 +5,23 @@
   ],
   "rules": {
     "at-rule-no-unknown": null,
-    "scss/at-rule-no-unknown": true
+    "scss/at-rule-no-unknown": true,
+    "property-no-unknown": [
+            true,
+            {
+                "ignoreProperties": [
+                    "themeDark"
+                ]
+            }
+        ],
+    "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": [
+                    "export",
+                    "global"
+                ]
+            }
+        ],
   }
 }

samples/react-calendar/.yo-rc.json

@@ -22,7 +22,7 @@
     "framework": "react",
     "plusBeta": true,
     "isCreatingSolution": true,
-    "version": "1.8.2",
+    "version": "1.10.0",
     "libraryName": "react-calendar",
     "libraryId": "3a13208b-3874-4036-9262-4edd22e88187",
     "packageManager": "npm",

samples/react-calendar/README.md

@@ -16,6 +16,7 @@ extensions:
 # React Calendar
 
 ## Summary
+
 This Web Part allows you to manage events in a calendar. 
 Uses a list of existing calendars on any website.
 The location and name of the list and the dates of the events to be displayed are defined in the properties of the web part.
@@ -85,7 +86,7 @@ The Web Part checks the user's permissions for the View, Add, Edit, and Delete e
 
 ## Used SharePoint Framework Version 
 
-![1.8.2](https://img.shields.io/badge/version-1.8.2-green.svg)
+![1.10.0](https://img.shields.io/badge/version-1.10.0-green.svg)
 
 ## Applies to
 
@@ -109,6 +110,7 @@ Solution|Author(s)
 --------|---------
 Calendar Web Part|João Mendes
 Calendar Web Part|Mohamed Derhalli
+Calendar Web Part (Upgrade)|Hugo Bernier ([@bernier](https://twitter.com/bernierh), [Tahoe Ninjas](https://tahoeninjas.blog/))
 
 ## Version history
 
@@ -117,6 +119,7 @@ Version|Date|Comments
 1.0.0|April 25, 2019|Initial release
 1.0.1|June 10, 2019|update add recurrence events
 1.0.2|April 25, 2020|Update styles according to the applied theme
+1.0.3|June 06, 2020|Upgrade to SPFx 1.10.0
 
 ## Disclaimer
 

samples/react-calendar/gulpfile.js

@@ -55,8 +55,6 @@ const stylelint = require('gulp-stylelint');
 /* Stylelinter sub task */
 let styleLintSubTask = build.subTask('stylelint', (gulp) => {
 
-    console.log('[stylelint]: By default style lint errors will not break your build. If you want to change this behaviour, modify failAfterError parameter in gulpfile.js.');
-
     return gulp
         .src('src/**/*.scss')
         .pipe(stylelint({
@@ -77,6 +75,7 @@ build.rig.addPreBuildTask(styleLintSubTask);
 
 
 build.initialize(gulp);
+build.sass.setConfig({ warnOnNonCSSModules: false, useCssModules:true});
 
 /**
  * Continuous Integration

samples/react-calendar/package.json

@@ -1,5 +1,6 @@
 {
   "name": "react-calendar",
+  "main": "lib/index.js",
   "version": "1.0.2",
   "private": true,
   "engines": {
@@ -14,11 +15,11 @@
     "test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
   },
   "dependencies": {
-    "@microsoft/sp-core-library": "1.8.2",
+    "@microsoft/sp-core-library": "1.10.0",
-    "@microsoft/sp-lodash-subset": "1.8.2",
+    "@microsoft/sp-lodash-subset": "1.10.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.8.2",
+    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
-    "@microsoft/sp-property-pane": "1.8.2",
+    "@microsoft/sp-property-pane": "1.10.0",
-    "@microsoft/sp-webpart-base": "1.8.2",
+    "@microsoft/sp-webpart-base": "1.10.0",
     "@pnp/pnpjs": "^1.3.0",
     "@pnp/spfx-controls-react": "1.12.0",
     "@pnp/spfx-property-controls": "1.14.1",
@@ -26,21 +27,23 @@
     "@types/es6-promise": "0.0.33",
     "@types/globalize": "0.0.34",
     "@types/jquery": "^3.3.29",
-    "@types/react": "16.7.22",
+    "@types/react": "16.8.8",
     "@types/react-big-calendar": "^0.20.13",
-    "@types/react-dom": "16.8.0",
+    "@types/react-dom": "16.8.3",
     "@types/webpack-env": "1.13.1",
     "@uifabric/fluent-theme": "^0.16.7",
+    "browserslist": "^4.12.0",
+    "caniuse-lite": "^1.0.30001079",
     "draft-js": "^0.10.5",
     "draftjs-to-html": "^0.8.4",
     "globalize": "^1.4.2",
     "immutable": "^4.0.0-rc.12",
     "jquery": "^3.3.1",
     "moment": "^2.24.0",
-    "office-ui-fabric-react": "6.143.0",
+    "office-ui-fabric-react": "6.189.2",
-    "react": "16.7.0",
+    "react": "16.8.5",
     "react-big-calendar": "^0.20.4",
-    "react-dom": "16.7.0",
+    "react-dom": "16.8.5",
     "react-draft-wysiwyg": "^1.13.2",
     "spfx-uifabric-themes": "^0.6.0",
     "string-format": "^2.0.0",
@@ -53,10 +56,11 @@
   "devDependencies": {
     "@microsoft/rush-stack-compiler-2.9": "0.7.7",
     "@microsoft/rush-stack-compiler-3.2": "0.3.17",
-    "@microsoft/sp-build-web": "^1.10.0",
+    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
-    "@microsoft/sp-module-interfaces": "1.8.2",
+    "@microsoft/sp-build-web": "1.10.0",
-    "@microsoft/sp-tslint-rules": "1.8.2",
+    "@microsoft/sp-module-interfaces": "1.10.0",
-    "@microsoft/sp-webpart-workbench": "^1.10.0",
+    "@microsoft/sp-tslint-rules": "1.10.0",
+    "@microsoft/sp-webpart-workbench": "1.10.0",
     "@types/chai": "3.4.34",
     "@types/mocha": "2.2.38",
     "@types/xml2js": "^0.4.4",

samples/react-calendar/src/controls/Event/Event.module.scss

@@ -1,4 +1,5 @@
 @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+@import '~office-ui-fabric-react/dist/sass/References.scss';
 
 .description {
   border: 1px solid #a6a6a6;

samples/react-calendar/src/webparts/_themes.scss

@@ -48,4 +48,4 @@ $ms-themeTertiaryAlt:           "[theme:themeTertiaryAlt, default:#c8c8c8]";
 $ms-white:                      "[theme:white, default:#ffffff]";
 $ms-whiteTranslucent40:         "[theme:whiteTranslucent40, default:rgba(255,255,255,.4)]";
 $ms-yellow:                     "[theme:yellow, default:#ffb900]";
-$ms-yellowLight:                "[theme:yellowLight, default:#fff100]";
+$ms-yellowLight:                "[theme:yellowLight, default:#fff100]";

samples/react-calendar/src/webparts/calendar/CalendarWebPart.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
-import { BaseClientSideWebPart, PropertyPaneHorizontalRule } from '@microsoft/sp-webpart-base';
 import {
   IPropertyPaneConfiguration,
   PropertyPaneTextField,
@@ -16,6 +15,9 @@ import Calendar from './components/Calendar';
 import { ICalendarProps } from './components/ICalendarProps';
 import { PropertyFieldDateTimePicker, DateConvention, TimeConvention, IDateTimeFieldValue } from '@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker';
 
+import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
+import { PropertyPaneHorizontalRule } from "@microsoft/sp-property-pane";
+
 export interface ICalendarWebPartProps {
   title: string;
   siteUrl: string;

samples/react-calendar/src/webparts/calendar/components/Calendar.module.scss

@@ -1,8 +1,10 @@
 @import "~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss";
+@import "~office-ui-fabric-react/dist/sass/References.scss";
 @import "./node_modules/spfx-uifabric-themes/office.theme.vars";
-@import '../../themes';
+@import "../../themes";
 
 :export {
+  /* stylelint-disable property-case */
   themeDark: $ms-color-themePrimary;
 }
 
@@ -18,14 +20,14 @@
   display: "block";
 }
 
-/* Added styles for days within the same month/week */ 
+/* Added styles for days within the same month/week */
-.dayPropGetter{
+.dayPropGetter {
   background-color: $ms-primaryBackground;
-  border-radius: '0px';
+  border-radius: "0px";
   opacity: 0.8;
-  color:  $ms-themeAccent;
+  color: $ms-themeAccent;
-  border: '0px';
+  border: "0px";
-  display: 'block';
+  display: "block";
 }
 
 .Documentcard {
@@ -91,7 +93,14 @@
   margin-bottom: 6px;
   font-size: $ms-font-size-m;
   font-weight: $ms-font-weight-semibold;
-  font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+  font-family:
+    "Segoe UI WestEuropean",
+    "Segoe UI",
+    -apple-system,
+    BlinkMacSystemFont,
+    Roboto,
+    "Helvetica Neue",
+    sans-serif;
 }
 
 .calendar {
@@ -159,7 +168,14 @@
     // Basic Button
     outline: transparent;
     position: relative;
-    font-family: "Segoe UI WestEuropean", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
+    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;

samples/react-calendar/src/webparts/calendar/components/Toolbar.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Toolbar from 'react-big-calendar/lib/Toolbar';
+import * as strings from 'CalendarWebPartStrings';
 
 export default class CalendarToolbar extends Toolbar {
 
@@ -12,16 +13,16 @@ export default class CalendarToolbar extends Toolbar {
 		return (
 			<div>
 				<div className="rbc-btn-group">
-					<button type="button" onClick={() => this.navigate('TODAY')}>today</button>
+					<button type="button" onClick={() => this.navigate('TODAY')}>{strings.todayLabel}</button>
-					<button type="button" onClick={() => this.navigate('PREV')}>back</button>
+					<button type="button" onClick={() => this.navigate('PREV')}>{strings.previousLabel}</button>
-					<button type="button" onClick={() => this.navigate('NEXT')}>next</button>
+					<button type="button" onClick={() => this.navigate('NEXT')}>{strings.nextLabel}</button>
 				</div>
 				<div className="rbc-toolbar-label">{this.props.label}</div>
 				<div className="rbc-btn-group">
-					<button type="button" onClick={this.view.bind(null, 'month')}>Month</button>
+					<button type="button" onClick={this.view.bind(null, 'month')}>{strings.monthLabel}</button>
-					<button type="button" onClick={this.view.bind(null, 'week')}>Week</button>
+					<button type="button" onClick={this.view.bind(null, 'week')}>{strings.weekLabel}</button>
-					<button type="button" onClick={this.view.bind(null, 'day')}>Day</button>
+					<button type="button" onClick={this.view.bind(null, 'day')}>{strings.dayLable}</button>
-					<button type="button" onClick={this.view.bind(null, 'agenda')}>Agenda</button>
+					<button type="button" onClick={this.view.bind(null, 'agenda')}>{strings.agenda}</button>
 				</div>
 			</div>
 		);

samples/react-calendar/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.2/includes/tsconfig-web.json",
+  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
   "compilerOptions": {
     "target": "es5",
     "forceConsistentCasingInFileNames": true,