Lint Test Fixes: Part One of Three

.stylelintrc

@@ -3,7 +3,18 @@
 	"rules": {
 		"property-no-unknown": [
 			true, {
-				"ignoreProperties": ["container-type"]
+				"ignoreProperties": [
+					"container-type",
+					"container"
+				]
+			}
+		],
+		"at-rule-no-unknown": [
+			true, {
+				"ignoreAtRules": [
+					"container",
+					"mixin"
+				]
 			}
 		]
 	},

package.json

@@ -23,7 +23,8 @@
       "src/resources/js/**/*.js",
       "!src/resources/js/**/*.min.js",
       "!src/resources/js/app/**/*.js",
-      "!src/resources/js/utils/query-string.js"
+      "!src/resources/js/utils/query-string.js",
+      "!src/**/__tests__/**/*.js"
     ],
     "stylelint": [
       "src/resources/postcss/**/*.pcss",

src/modules/components/form/select/component.js

@@ -22,24 +22,25 @@ export default class Select extends PureComponent {
 		options: PropTypes.shape( {
 			label: PropTypes.string,
 			value: PropTypes.any,
+			map: PropTypes.func,
 		} ),
 		onOptionClick: PropTypes.func.isRequired,
 		optionClassName: PropTypes.string,
 		isOpen: PropTypes.bool.isRequired,
 		value: PropTypes.any,
 		className: PropTypes.string,
-	}
+	};
 
 	static defaultProps = {
 		onOptionClick: noop,
 		isOpen: true,
 		optionClassName: '',
-	}
+	};
 
 	_onOptionClick = ( onClose, value, e ) => {
 		this.props.onOptionClick( value, e );
 		onClose();
-	}
+	};
 
 	get selected() {
 		return find( this.props.options, option => option.value === this.props.value );
@@ -66,7 +67,7 @@ export default class Select extends PureComponent {
 				{ option.label }
 			</button>
 		) )
-	)
+	);
 
 	renderToggle = ( { onToggle, isOpen } ) => (
 		<div className="tribe-common-form-select__toggle">
@@ -82,7 +83,7 @@ export default class Select extends PureComponent {
 				/>
 			</button>
 		</div>
-	)
+	);
 
 	renderContent = ( { onClose } ) => (
 		<ScrollTo>

src/modules/elements/accordion/row/template.js

@@ -23,6 +23,7 @@ class Row extends PureComponent {
 		onClick: PropTypes.func,
 		onClose: PropTypes.func,
 		onOpen: PropTypes.func,
+		contentId: PropTypes.string,
 	};
 
 	static defaultProps = {

src/modules/elements/block-icon/index.js

@@ -9,8 +9,10 @@ import React from 'react';
 import { TEC } from '@moderntribe/common/icons';
 import './style.pcss';
 
-export default () => (
+const BlockIcon = () => (
 	<div className="tribe-editor__icons__container tribe-editor__icons--tec">
 		<TEC />
 	</div>
 );
+
+export default BlockIcon;

src/modules/elements/creatable-select/element.js

@@ -4,8 +4,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { components } from 'react-select';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
 import { Dashicon } from '@wordpress/components';
 
 /**

src/modules/elements/day-picker-input/element.js

@@ -1,13 +1,15 @@
+/* global DateFormatter */
 /**
  * External dependencies
  */
 import React, { useState, useRef, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
-import "react-day-picker/src/style.css";
+import 'react-day-picker/src/style.css';
 import { DayPicker } from 'react-day-picker';
 import { Popover } from '@wordpress/components';
 import { getSettings as getDateSettings } from '@wordpress/date';
 import { parse as parseDate } from 'date-fns';
+import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
@@ -25,7 +27,7 @@
 			<input
 				ref={ inputRef } // Attach the ref to the input element
 				className={ classNames( 'tribe-editor__date-input' ) }
-				onChange={ ( event ) => {
+				onChange={ () => {
 
 				} }
 				{ ...inputProps }
@@ -34,21 +36,25 @@
 	);
 };
 
+DatePickerInput.propTypes = {
+	setPopoverAnchor: PropTypes.func.isRequired,
+	inputRef: PropTypes.object.isRequired,
+	onDayChange: PropTypes.func.isRequired,
+};
+
 /**
  * Converts the date format from moment.js to the Unicode one used in date-fns.
  *
  * @see https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md
- *
  * @param {string} momentFormat The moment.js format string to convert.
- *
  * @returns {string} The converted format string.
  */
-const momentToDateFnsFormatter = (momentFormat) => {
+const momentToDateFnsFormatter = ( momentFormat ) => {
 	return momentFormat
-	.replace('DD', 'dd')
-	.replace('D', 'd')
-	.replace('YYYY', 'yyyy')
-	.replace('YY', 'yy');
+		.replace( 'DD', 'dd' )
+		.replace( 'D', 'd' )
+		.replace( 'YYYY', 'yyyy' )
+		.replace( 'YY', 'yy' );
 };
 
 const DayPickerInput = ( props ) => {
@@ -57,51 +63,51 @@
 	const [ isVisible, setIsVisible ] = useState( false );
 	// Do not memoize this: it could be changed in the context of the Block Editor elsewhere.
 	const phpDateFormat = getDateSettings()?.formats?.date ?? 'MMMM d, y';
-	const dateFormatter = useMemo(() => new DateFormatter(), []);
-	const parsePhpDate  = useCallback(
-		value => dateFormatter.parseDate(value, phpDateFormat),
-		[phpDateFormat]
-	)
+	const dateFormatter = useMemo( () => new DateFormatter(), [] );
+	const parsePhpDate = useCallback(
+		value => dateFormatter.parseDate( value, phpDateFormat ),
+		[ phpDateFormat ],
+	);
 	const formatPhpDate = useCallback(
-		date => dateFormatter.formatDate(date, phpDateFormat),
-		[phpDateFormat]
+		date => dateFormatter.formatDate( date, phpDateFormat ),
+		[ phpDateFormat ],
 	);
 
 	const toggleVisible = () => {
 		setIsVisible( ( state ) => ! state );
 	};
 
-	const { value, onDayChange, formatDate, format } = props;
+	const { value, onDayChange, format } = props;
 
 	// Convert the format from the moment.js one to date-fns one using Unicode characters.
-	const dateFnsFormat = momentToDateFnsFormatter(format);
+	const dateFnsFormat = momentToDateFnsFormatter( format );
 
-	const getSelectedDateInitialState = useCallback((value) => {
+	const getSelectedDateInitialState = useCallback( ( val ) => {
 		// Try and parse the value using teh date-fns format.
-		const d = parseDate(value, dateFnsFormat, new Date());
+		const d = parseDate( val, dateFnsFormat, new Date() );
 
-		if (d instanceof Date && !isNaN(d)) {
+		if ( d instanceof Date && ! isNaN( d ) ) {
 			return d;
 		}
 
 		// Try and parse the value using the PHP date format.
-		const parsed = parsePhpDate(value);
+		const parsed = parsePhpDate( value );
 
 		return parsed;
-	}, [dateFnsFormat, parsePhpDate]);
+	}, [ dateFnsFormat, parsePhpDate ] );
 
-	const [selectedDate, setSelectedDate] = useState(value ? getSelectedDateInitialState(value) : new Date());
+	const [ selectedDate, setSelectedDate ] = useState(
+		value ? getSelectedDateInitialState( value ) : new Date(),
+	);
 
 	/**
 	 * Formats the datepicker Date object to the datepicker format.
 	 *
 	 * @param {Date|null} date The date to format to the datepicker format.
-	 *
 	 * @returns {string} The formatted date.
 	 */
 	const formatDatepickerValue = ( date ) => {
-		// return date ? formatDate( date, 'MMMM d, y', new Date() ) : '';
-		return date ? formatPhpDate(date) : '';
+		return date ? formatPhpDate( date ) : '';
 	};
 
 	return (
@@ -115,7 +121,7 @@
 			/>
 			{ isVisible && (
 				<>
-					<Popover.Slot/>
+					<Popover.Slot />
 					<Popover
 						className={ classNames( 'tribe-editor__date-input__popover' ) }
 						anchor={ popoverAnchor.current }
@@ -129,7 +135,7 @@
 								setSelectedDate( date );
 								toggleVisible();
 							} }
-							isSelected={true}
+							isSelected={ true }
 						/>
 					</Popover>
 				</>
@@ -138,4 +144,10 @@
 	);
 };
 
+DayPickerInput.propTypes = {
+	value: PropTypes.string,
+	onDayChange: PropTypes.func.isRequired,
+	format: PropTypes.string.isRequired,
+};
+
 export default DayPickerInput;

src/modules/elements/heading/element.js

@@ -27,6 +27,7 @@ const Heading = ( { level, children, className } ) => {
 Heading.propTypes = {
 	children: PropTypes.node.isRequired,
 	level: PropTypes.oneOf( [ 1, 2, 3, 4, 5, 6 ] ).isRequired,
+	className: PropTypes.string,
 };
 
 export default Heading;

src/modules/elements/image-upload/element.js

@@ -21,6 +21,7 @@ import { wpEditor } from '@moderntribe/common/utils/globals';
 import './style.pcss';
 const { MediaUpload } = wpEditor;
 
+// eslint-disable-next-line react/display-name, react/prop-types
 export const renderImageUploadButton = ( disabled, label ) => ( { open } ) => (
 	<Button
 		onClick={ open }

src/modules/elements/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable wpcalypso/import-docblock */
 export { default as Accordion } from './accordion';
 export { default as BlockIcon } from './block-icon';
 export { default as Button } from './button';

src/modules/elements/paragraph/element.js

@@ -32,6 +32,7 @@ const Paragraph = ( { children, size = SIZES.medium, className } ) => (
 Paragraph.propTypes = {
 	children: PropTypes.node.isRequired,
 	size: PropTypes.oneOf( Object.keys( SIZES ) ),
+	className: PropTypes.string,
 };
 
 export default Paragraph;

src/modules/elements/placeholder/element.js

@@ -18,6 +18,7 @@ const Placeholder = ( { children, className } ) => (
 
 Placeholder.propTypes = {
 	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
 };
 
 export default Placeholder;

src/modules/elements/radio/element.js

@@ -11,6 +11,7 @@ import { noop } from 'lodash';
  */
 import { RadioInput } from '@moderntribe/common/elements';
 
+// eslint-disable-next-line max-len
 const Radio = ( { checked = false, className, disabled, id, label, onChange = noop, name, value } ) => (
 	<div className={ classNames( 'tribe-editor__radio', className ) }>
 		<RadioInput

src/modules/elements/time-picker/element.js

@@ -111,7 +111,7 @@ const TimePicker = ( {
 
 			items.push( {
 				value: time,
-				text : formatLabel( time ),
+				text: formatLabel( time ),
 				isCurrent,
 			} );
 		}
@@ -121,7 +121,7 @@ const TimePicker = ( {
 
 	const renderItem = ( item, onClose ) => {
 		const itemClasses = {
-			'tribe-editor__timepicker__item'         : true,
+			'tribe-editor__timepicker__item': true,
 			'tribe-editor__timepicker__item--current': item.isCurrent && ! allDay,
 		};
 
@@ -178,17 +178,17 @@ TimePicker.propTypes = {
 	 * using 24h clock in hh:mm format
 	 * e.g. 00:24, 03:57, 21:12
 	 */
-	allDay    : PropTypes.bool,
-	current   : PropTypes.string,
-	disabled  : PropTypes.bool,
-	end       : TribePropTypes.timeFormat.isRequired,
-	onBlur    : PropTypes.func,
-	onChange  : PropTypes.func,
-	onClick   : PropTypes.func,
-	onFocus   : PropTypes.func,
+	allDay: PropTypes.bool,
+	current: PropTypes.string,
+	disabled: PropTypes.bool,
+	end: TribePropTypes.timeFormat.isRequired,
+	onBlur: PropTypes.func,
+	onChange: PropTypes.func,
+	onClick: PropTypes.func,
+	onFocus: PropTypes.func,
 	showAllDay: PropTypes.bool,
-	start     : TribePropTypes.timeFormat.isRequired,
-	step      : PropTypes.number,
+	start: TribePropTypes.timeFormat.isRequired,
+	step: PropTypes.number,
 	timeFormat: PropTypes.string,
 };
 

src/modules/elements/url-input/element.js

@@ -20,6 +20,7 @@ const UrlInput = ( { checked, className, onChange, ...rest } ) => (
 );
 
 UrlInput.propTypes = {
+	checked: PropTypes.bool,
 	className: PropTypes.string,
 	onChange: PropTypes.func,
 };

src/resources/js/admin-image-field.js

@@ -89,7 +89,7 @@ tribe.settings.fields.image = {};
 		}
 
 		if ( $fieldParent.is( '[data-image-id=1]' ) ) {
-			 $fieldParent.find( obj.selectors.imgIdInput ).val( attachment.id );
+			$fieldParent.find( obj.selectors.imgIdInput ).val( attachment.id );
 		} else {
 			$fieldParent.find( obj.selectors.imgIdInput ).val( attachment.url );
 		}
@@ -174,4 +174,4 @@ tribe.settings.fields.image = {};
 
 	$( obj.init );
 
-} )( jQuery, tribe.settings.fields.image );
+} )( jQuery, tribe.settings.fields.image );

src/resources/js/dropdowns.js

@@ -1,4 +1,4 @@
-var tribe_dropdowns = window.tribe_dropdowns || {};
+window.tribe_dropdowns = window.tribe_dropdowns || {};
 
 ( function( $, obj, _ ) {
 	'use strict';
@@ -609,4 +609,4 @@ var tribe_dropdowns = window.tribe_dropdowns || {};
 		$( obj.selector.dropdown ).tribe_dropdowns();
 	});
 
-} )( jQuery, tribe_dropdowns, window.underscore || window._ );
+} )( jQuery, window.tribe_dropdowns, window.underscore || window._ );