Merge pull request #331 from 10up/fix/remove-prop-types-dependency

Remove: `defaultProps` & `propTypes` definitions from remaining components

.eslintrc

@@ -8,6 +8,7 @@
 		"import/no-extraneous-dependencies": 0,
 		"react/jsx-props-no-spreading": 0,
 		"jsdoc/check-tag-names": 0,
-		"import/extensions": 0
+		"import/extensions": 0,
+		"react/prop-types": 0
 	}
 }

api/register-block-extension/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 /* eslint-disable react/jsx-props-no-spreading */
 
 import { addFilter } from '@wordpress/hooks';

components/clipboard-button/index.tsx

@@ -38,10 +38,10 @@ interface ButtonLabels {
 }
 
 export const ClipboardButton: React.FC<ClipboardButtonProps> = ({
-	text,
-	disabled,
-	onSuccess,
-	labels,
+	text = '',
+	disabled = false,
+	onSuccess = () => {},
+	labels = {},
 }) => {
 	const [hasCopied, setHasCopied] = useState(false);
 	const copy = labels.copy ? labels.copy : __('Copy');
@@ -84,10 +84,3 @@ export const ClipboardButton: React.FC<ClipboardButtonProps> = ({
 		</Button>
 	);
 };
-
-ClipboardButton.defaultProps = {
-	text: '',
-	disabled: false,
-	onSuccess: () => {},
-	labels: {},
-};

components/content-picker/PickedItem.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
@@ -51,7 +50,7 @@ function getType(mode) {
  * @param {number|string} props.id id of the item
  * @returns {*} React JSX
  */
-const PickedItem = ({ item, isOrderable, handleItemDelete, mode, id }) => {
+const PickedItem = ({ item, isOrderable = false, handleItemDelete, mode, id }) => {
 	const type = getType(mode);
 
 	const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
@@ -140,16 +139,4 @@ const PickedItem = ({ item, isOrderable, handleItemDelete, mode, id }) => {
 	);
 };
 
-PickedItem.defaultProps = {
-	isOrderable: false,
-};
-
-PickedItem.propTypes = {
-	item: PropTypes.object.isRequired,
-	isOrderable: PropTypes.bool,
-	handleItemDelete: PropTypes.func.isRequired,
-	mode: PropTypes.string.isRequired,
-	id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-};
-
 export default PickedItem;

components/content-picker/SortableList.js

@@ -7,10 +7,15 @@ import {
 	useSensors,
 } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import PropTypes from 'prop-types';
 import PickedItem from './PickedItem';
 
-const SortableList = ({ posts, isOrderable, handleItemDelete, mode, setPosts }) => {
+const SortableList = ({
+	posts,
+	isOrderable = false,
+	handleItemDelete,
+	mode = 'post',
+	setPosts,
+}) => {
 	const hasMultiplePosts = posts.length > 1;
 
 	const items = posts.map((item) => item.uuid);
@@ -45,17 +50,4 @@ const SortableList = ({ posts, isOrderable, handleItemDelete, mode, setPosts })
 	);
 };
 
-SortableList.defaultProps = {
-	isOrderable: false,
-	mode: 'post',
-};
-
-SortableList.propTypes = {
-	posts: PropTypes.array.isRequired,
-	isOrderable: PropTypes.bool,
-	handleItemDelete: PropTypes.func.isRequired,
-	mode: PropTypes.string,
-	setPosts: PropTypes.func.isRequired,
-};
-
 export default SortableList;

components/content-picker/index.js

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { select } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
@@ -43,7 +42,7 @@ const ContentPickerWrapper = styled.div`
  * @param {Array} props.contentTypes array of content types to filter by
  * @param {string} props.placeholder placeholder text for the search input
  * @param {Function} props.onPickChange callback for when the picker changes
- * @param {Function} props.queryFilter callback that allows to modify the query
+ * @param {?Function} props.queryFilter callback that allows to modify the query
  * @param {number} props.maxContentItems max number of items to show in the picker
  * @param {boolean} props.isOrderable whether or not the picker is sortable
  * @param {string} props.singlePickedLabel label for the single picked item
@@ -54,28 +53,30 @@ const ContentPickerWrapper = styled.div`
  * @param {number} props.perPage number of items to show per page
  * @param {boolean} props.fetchInitialResults whether or not to fetch initial results on mount
  * @param {Function} props.renderItemType callback to render the item type
- * @param {Function} props.renderItem react component to render the search result item
+ * @param {?Function} props.renderItem react component to render the search result item
  * @returns {*} React JSX
  */
-const ContentPicker = ({
-	label,
-	hideLabelFromVision,
-	mode,
-	contentTypes,
-	placeholder,
-	onPickChange,
-	queryFilter,
-	maxContentItems,
-	isOrderable,
-	singlePickedLabel,
-	multiPickedLabel,
-	content,
-	uniqueContentItems,
-	excludeCurrentPost,
-	perPage,
-	fetchInitialResults,
-	renderItemType,
-	renderItem,
+export const ContentPicker = ({
+	label = '',
+	hideLabelFromVision = true,
+	mode = 'post',
+	contentTypes = ['post', 'page'],
+	placeholder = '',
+	onPickChange = (ids) => {
+		console.log('Content picker list change', ids); // eslint-disable-line no-console
+	},
+	queryFilter = null,
+	maxContentItems = 1,
+	isOrderable = false,
+	singlePickedLabel = __('You have selected the following item:', '10up-block-components'),
+	multiPickedLabel = __('You have selected the following items:', '10up-block-components'),
+	content = [],
+	uniqueContentItems = true,
+	excludeCurrentPost = true,
+	perPage = 20,
+	fetchInitialResults = false,
+	renderItemType = defaultRenderItemType,
+	renderItem = null,
 }) => {
 	const currentPostId = select('core/editor')?.getCurrentPostId();
 
@@ -187,49 +188,3 @@ const ContentPicker = ({
 		</StyledComponentContext>
 	);
 };
-
-ContentPicker.defaultProps = {
-	label: '',
-	hideLabelFromVision: true,
-	mode: 'post',
-	onPickChange: (ids) => {
-		console.log('Content picker list change', ids); // eslint-disable-line no-console
-	},
-	queryFilter: undefined,
-	contentTypes: ['post', 'page'],
-	placeholder: '',
-	content: [],
-	perPage: 20,
-	maxContentItems: 1,
-	uniqueContentItems: true,
-	isOrderable: false,
-	excludeCurrentPost: true,
-	multiPickedLabel: __('You have selected the following items:', '10up-block-components'),
-	singlePickedLabel: __('You have selected the following item:', '10up-block-components'),
-	fetchInitialResults: false,
-	renderItemType: defaultRenderItemType,
-	renderItem: undefined,
-};
-
-ContentPicker.propTypes = {
-	contentTypes: PropTypes.array,
-	content: PropTypes.array,
-	placeholder: PropTypes.string,
-	mode: PropTypes.oneOf(['post', 'user', 'term']),
-	label: PropTypes.string,
-	hideLabelFromVision: PropTypes.bool,
-	multiPickedLabel: PropTypes.string,
-	singlePickedLabel: PropTypes.string,
-	isOrderable: PropTypes.bool,
-	onPickChange: PropTypes.func,
-	queryFilter: PropTypes.func,
-	uniqueContentItems: PropTypes.bool,
-	excludeCurrentPost: PropTypes.bool,
-	maxContentItems: PropTypes.number,
-	perPage: PropTypes.number,
-	fetchInitialResults: PropTypes.bool,
-	renderItemType: PropTypes.func,
-	renderItem: PropTypes.func,
-};
-
-export { ContentPicker };

components/custom-block-appender/index.js

@@ -1,12 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/**
- * External dependencies
- */
-import PropTypes from 'prop-types';
-
-/**
- * WordPress dependencies
- */
 import { Inserter } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 
@@ -25,8 +16,8 @@ import { Button } from '@wordpress/components';
  */
 const CustomBlockAppender = ({
 	rootClientId,
-	buttonText,
-	icon,
+	buttonText = '',
+	icon = 'plus',
 	className = 'custom-block-appender',
 	...buttonProps
 }) => {
@@ -49,19 +40,4 @@ const CustomBlockAppender = ({
 	);
 };
 
-CustomBlockAppender.propTypes = {
-	rootClientId: PropTypes.string.isRequired,
-	buttonText: PropTypes.string,
-	label: PropTypes.string,
-	icon: PropTypes.string,
-	className: PropTypes.string,
-};
-
-CustomBlockAppender.defaultProps = {
-	buttonText: '',
-	label: '',
-	icon: 'plus',
-	className: 'custom-block-appender',
-};
-
 export { CustomBlockAppender };

components/image/index.js

@@ -1,17 +1,16 @@
 import { MediaPlaceholder, InspectorControls } from '@wordpress/block-editor';
 import { Spinner, FocalPointPicker, PanelBody, Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 
 import { useMedia } from '../../hooks/use-media';
 
-const Image = (props) => {
+export const Image = (props) => {
 	const {
 		id,
 		size = 'full',
 		onSelect,
 		focalPoint = { x: 0.5, y: 0.5 },
-		onChangeFocalPoint,
+		onChangeFocalPoint = undefined,
 		labels = {},
 		canEditImage = true,
 		allowedTypes = ['image'],
@@ -75,31 +74,3 @@ const Image = (props) => {
 		</>
 	);
 };
-
-export { Image };
-
-Image.defaultProps = {
-	size: 'large',
-	focalPoint: { x: 0.5, y: 0.5 },
-	onChangeFocalPoint: undefined,
-	labels: {},
-	canEditImage: true,
-	allowedTypes: ['image'],
-};
-
-Image.propTypes = {
-	id: PropTypes.number.isRequired,
-	size: PropTypes.string,
-	onSelect: PropTypes.func.isRequired,
-	onChangeFocalPoint: PropTypes.func,
-	allowedTypes: PropTypes.array,
-	focalPoint: PropTypes.shape({
-		x: PropTypes.string,
-		y: PropTypes.string,
-	}),
-	labels: PropTypes.shape({
-		title: PropTypes.string,
-		instructions: PropTypes.string,
-	}),
-	canEditImage: PropTypes.bool,
-};

components/inner-block-slider/index.js

@@ -1,23 +1,20 @@
 /* eslint-disable */
 // @ts-nocheck
-// eslint-disable-file
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 import { useInnerBlocksProps } from '@wordpress/block-editor';
 import deprecated from '@wordpress/deprecated';
-import PropTypes from 'prop-types';
 /** @jsx jsx */
-// eslint-disable-next-line no-unused-vars
 import { jsx, css } from '@emotion/react';
 import { ChevronLeft, ChevronRight } from './icons';
 
-const InnerBlockSlider = ({
+export const InnerBlockSlider = ({
 	parentBlockId,
-	slidesPerPage,
+	slidesPerPage = 1,
 	allowedBlock,
-	template,
-	slideHeight,
+	template = null,
+	slideHeight = null,
 }) => {
 	const [currentPage, setCurrentPage] = useState(1);
 
@@ -173,19 +170,3 @@ const InnerBlockSlider = ({
 		</div>
 	);
 };
-
-InnerBlockSlider.defaultProps = {
-	slidesPerPage: 1,
-	template: null,
-	slideHeight: null,
-};
-
-InnerBlockSlider.propTypes = {
-	slidesPerPage: PropTypes.number,
-	parentBlockId: PropTypes.string.isRequired,
-	allowedBlock: PropTypes.string.isRequired,
-	template: PropTypes.array,
-	slideHeight: PropTypes.string,
-};
-
-export { InnerBlockSlider };