Improved proptypes

react/Shelf.js

@@ -14,7 +14,7 @@ import OrdenationTypes, {
 import ProductList from './components/ProductList'
 import { productListSchemaPropTypes } from './utils/propTypes'
 import productsQuery from './queries/productsQuery.gql'
-import ShelfContent from './components/ShelfContent'
+import { shelfContentPropTypes } from './utils/propTypes'
 
 import { parseToProductImpression, normalizeBuyable } from './utils/normalize'
 
@@ -89,7 +89,7 @@ const Shelf = ({ data, productList = ProductList.defaultProps, paginationDotsVis
 Shelf.propTypes = {
   /** Graphql data response. */
   data: PropTypes.shape({
-    products: ShelfContent.propTypes.products,
+    products: shelfContentPropTypes.products,
   }),
   /** Category Id. */
   category: PropTypes.string,

react/components/ShelfContent.js

@@ -1,16 +1,14 @@
-import PropTypes from 'prop-types'
 import { path } from 'ramda'
 import React, { Component } from 'react'
 import { IconCaret } from 'vtex.store-icons'
 import classNames from 'classnames'
 import { NoSSR } from 'vtex.render-runtime'
 import { Slider, Slide, Dots, SliderContainer } from 'vtex.slider'
 import { withCssHandles } from 'vtex.css-handles'
-import { getGapPaddingValues } from '../utils/paddingEnum'
 import { resolvePaginationDotsVisibility } from '../utils/resolvePaginationDots'
 import ScrollTypes from '../utils/ScrollTypes'
 import ShelfItem from './ShelfItem'
-import { shelfItemPropTypes } from '../utils/propTypes'
+import { shelfContentPropTypes } from '../utils/propTypes'
 import shelf from './shelf.css'
 
 const CSS_HANDLES = ['arrow', 'arrowLeft', 'arrowRight', 'shelfContentContainer', 'sliderContainer', 'slide']
@@ -165,32 +163,27 @@ ShelfContent.defaultProps = {
 
 ShelfContent.propTypes = {
   /** List of products */
-  products: PropTypes.arrayOf(shelfItemPropTypes.item),
+  products: shelfContentPropTypes.products,
   /** Max Items per page */
-  itemsPerPage: PropTypes.number.isRequired,
+  itemsPerPage: shelfContentPropTypes.itemsPerPage,
   /** Minimum Items per page */
-  minItemsPerPage: PropTypes.number.isRequired,
+  minItemsPerPage: shelfContentPropTypes.minItemsPerPage,
   /** Max items in shelf */
-  maxItems: PropTypes.number.isRequired,
+  maxItems: shelfContentPropTypes.maxItems,
   /** Show Arrows */
-  arrows: PropTypes.bool.isRequired,
+  arrows: shelfContentPropTypes.arrows,
   /** Scroll type */
-  scroll: PropTypes.string.isRequired,
+  scroll: shelfContentPropTypes.scroll,
   /** Should display navigation dots below the Shelf */
-  paginationDotsVisibility: PropTypes.oneOf([
-    'visible',
-    'hidden',
-    'desktopOnly',
-    'mobileOnly',
-  ]),
+  paginationDotsVisibility: shelfContentPropTypes.paginationDotsVisibility,
   /** Container width */
-  width: PropTypes.number,
+  width: shelfContentPropTypes.width,
   /** Props to ProductsSummary */
-  summary: PropTypes.any,
+  summary: shelfContentPropTypes.summary,
   /** Is mobile */
-  isMobile: PropTypes.bool,
+  isMobile: shelfContentPropTypes.isMobile,
   /** Gap between Shelf Items */
-  gap: PropTypes.oneOf(getGapPaddingValues()),
+  gap: shelfContentPropTypes.gap,
 }
 
 export default withCssHandles(CSS_HANDLES)(ShelfContent)

react/utils/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
 
 import { getScrollValues } from './ScrollTypes'
+import { getGapPaddingValues } from './paddingEnum'
 
 export const shelfItemPropTypes = {
   item: PropTypes.shape({
@@ -74,3 +75,33 @@ export const productListSchemaPropTypes = {
   /** Product Summary schema props */
   summary: PropTypes.any,
 }
+
+export const shelfContentPropTypes = {
+  /** List of products */
+  products: PropTypes.arrayOf(shelfItemPropTypes.item),
+  /** Max Items per page */
+  itemsPerPage: PropTypes.number.isRequired,
+  /** Minimum Items per page */
+  minItemsPerPage: PropTypes.number.isRequired,
+  /** Max items in shelf */
+  maxItems: PropTypes.number.isRequired,
+  /** Show Arrows */
+  arrows: PropTypes.bool.isRequired,
+  /** Scroll type */
+  scroll: PropTypes.string.isRequired,
+  /** Should display navigation dots below the Shelf */
+  paginationDotsVisibility: PropTypes.oneOf([
+    'visible',
+    'hidden',
+    'desktopOnly',
+    'mobileOnly',
+  ]),
+  /** Container width */
+  width: PropTypes.number,
+  /** Props to ProductsSummary */
+  summary: PropTypes.any,
+  /** Is mobile */
+  isMobile: PropTypes.bool,
+  /** Gap between Shelf Items */
+  gap: PropTypes.oneOf(getGapPaddingValues()),
+}