Merge pull request #56 from ekoeryanto/prop-types

feat(prop-types): add prop-types validation to components

Author: AustinGreen

src/cms/preview-templates/AboutPagePreview.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { AboutPageTemplate } from '../../templates/about-page'
 
 const AboutPagePreview = ({ entry, widgetFor }) => (
@@ -8,4 +9,11 @@ const AboutPagePreview = ({ entry, widgetFor }) => (
   />
 )
 
+AboutPagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  widgetFor: PropTypes.func,
+}
+
 export default AboutPagePreview

src/cms/preview-templates/BlogPostPreview.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { BlogPostTemplate } from '../../templates/blog-post'
 
 const BlogPostPreview = ({ entry, widgetFor }) => (
@@ -10,4 +11,11 @@ const BlogPostPreview = ({ entry, widgetFor }) => (
   />
 )
 
+BlogPostPreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  widgetFor: PropTypes.func,
+}
+
 export default BlogPostPreview

src/cms/preview-templates/ProductPagePreview.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { ProductPageTemplate } from '../../templates/product-page'
 
 const ProductPagePreview = ({ entry, getAsset }) => {
@@ -45,4 +46,11 @@ const ProductPagePreview = ({ entry, getAsset }) => {
   )
 }
 
+ProductPagePreview.propTypes = {
+  entry: PropTypes.shape({
+    getIn: PropTypes.func,
+  }),
+  getAsset: PropTypes.func,
+}
+
 export default ProductPagePreview

src/components/Content.js

@@ -1,8 +1,19 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-export default ({ content, className }) => (
-  <div className={className}>{content}</div>
-)
 export const HTMLContent = ({ content, className }) => (
   <div className={className} dangerouslySetInnerHTML={{ __html: content }} />
 )
+
+const Content = ({ content, className }) => (
+  <div className={className}>{content}</div>
+)
+
+Content.propTypes = {
+  content: PropTypes.string,
+  className: PropTypes.string,
+}
+
+HTMLContent.propTypes = Content.propTypes
+
+export default Content

src/components/Features.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 const FeatureGrid = ({ gridItems }) => (
   <div className="columns is-multiline">
@@ -15,4 +16,13 @@ const FeatureGrid = ({ gridItems }) => (
   </div>
 )
 
+FeatureGrid.propTypes = {
+  gridItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      image: PropTypes.string,
+      text: PropTypes.string,
+    })
+  ),
+}
+
 export default FeatureGrid

src/components/Pricing.js

@@ -1,6 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-export default ({ data }) => (
+const Pricing = ({ data }) => (
   <div className="columns">
     {data.map(price => (
       <div key={price.plan} className="column">
@@ -24,3 +25,16 @@ export default ({ data }) => (
     ))}
   </div>
 )
+
+Pricing.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      plan: PropTypes.string,
+      price: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      description: PropTypes.string,
+      items: PropTypes.array,
+    })
+  ),
+}
+
+export default Pricing

src/components/Testimonials.js

@@ -1,6 +1,7 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-export default ({ testimonials }) => (
+const Testimonials = ({ testimonials }) => (
   <div>
     {testimonials.map(testimonial => (
       <article className="message">
@@ -13,3 +14,14 @@ export default ({ testimonials }) => (
     ))}
   </div>
 )
+
+Testimonials.propTypes = {
+  testimonials: PropTypes.arrayOf(
+    PropTypes.shape({
+      quote: PropTypes.string,
+      author: PropTypes.string,
+    })
+  ),
+}
+
+export default Testimonials

src/pages/index.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Link from 'gatsby-link'
 
 export default class IndexPage extends React.Component {
@@ -43,6 +44,14 @@ export default class IndexPage extends React.Component {
   }
 }
 
+IndexPage.propTypes = {
+  data: PropTypes.shape({
+    allMarkdownRemark: PropTypes.shape({
+      edges: PropTypes.array,
+    }),
+  }),
+}
+
 export const pageQuery = graphql`
   query IndexQuery {
     allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {

src/templates/about-page.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Content, { HTMLContent } from '../components/Content'
 
 export const AboutPageTemplate = ({ title, content, contentComponent }) => {
@@ -22,7 +23,13 @@ export const AboutPageTemplate = ({ title, content, contentComponent }) => {
   )
 }
 
-export default ({ data }) => {
+AboutPageTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string,
+  contentComponent: PropTypes.func,
+}
+
+const AboutPage = ({ data }) => {
   const { markdownRemark: post } = data
 
   return (
@@ -34,6 +41,12 @@ export default ({ data }) => {
   )
 }
 
+AboutPage.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+export default AboutPage
+
 export const aboutPageQuery = graphql`
   query AboutPage($id: String!) {
     markdownRemark(id: { eq: $id }) {

src/templates/blog-post.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { kebabCase } from 'lodash'
 import Helmet from 'react-helmet'
 import Link from 'gatsby-link'
@@ -44,8 +45,16 @@ export const BlogPostTemplate = ({
   )
 }
 
-export default props => {
-  const { markdownRemark: post } = props.data
+BlogPostTemplate.propTypes = {
+  content: PropTypes.string.isRequired,
+  contentComponent: PropTypes.func,
+  description: PropTypes.string,
+  title: PropTypes.string,
+  helmet: PropTypes.instanceOf(Helmet),
+}
+
+const BlogPost = ({ data }) => {
+  const { markdownRemark: post } = data
 
   return (
     <BlogPostTemplate
@@ -59,6 +68,14 @@ export default props => {
   )
 }
 
+BlogPost.propTypes = {
+  data: PropTypes.shape({
+    markdownRemark: PropTypes.object,
+  }),
+}
+
+export default BlogPost
+
 export const pageQuery = graphql`
   query BlogPostByID($id: String!) {
     markdownRemark(id: { eq: $id }) {

src/templates/product-page.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Features from '../components/Features'
 import Testimonials from '../components/Testimonials'
 import Pricing from '../components/Pricing'
@@ -104,7 +105,31 @@ export const ProductPageTemplate = ({
   </section>
 )
 
-export default ({ data }) => {
+ProductPageTemplate.propTypes = {
+  image: PropTypes.string,
+  title: PropTypes.string,
+  heading: PropTypes.string,
+  description: PropTypes.string,
+  intro: PropTypes.shape({
+    blurbs: PropTypes.array,
+  }),
+  main: PropTypes.shape({
+    heading: PropTypes.string,
+    description: PropTypes.string,
+    image1: PropTypes.object,
+    image2: PropTypes.object,
+    image3: PropTypes.object,
+  }),
+  testimonials: PropTypes.array,
+  fullImage: PropTypes.string,
+  pricing: PropTypes.shape({
+    heading: PropTypes.string,
+    description: PropTypes.string,
+    plans: PropTypes.array,
+  }),
+}
+
+const ProductPage = ({ data }) => {
   const { frontmatter } = data.markdownRemark
 
   return (
@@ -122,6 +147,16 @@ export default ({ data }) => {
   )
 }
 
+ProductPage.propTypes = {
+  data: PropTypes.shape({
+    markdownRemark: PropTypes.shape({
+      frontmatter: PropTypes.object,
+    }),
+  }),
+}
+
+export default ProductPage
+
 export const productPageQuery = graphql`
   query ProductPage($id: String!) {
     markdownRemark(id: { eq: $id }) {