Merge pull request #93 from WebDevStudios/feature/gravityform-demo

Feature/gravityform demo

Author: Greg Rickaby

components/molecules/GravityForm/Fields/Fields.js

@@ -3,6 +3,15 @@ import * as GfFields from '.'
 import {useEffect} from 'react'
 import getGfFieldValidationSchema from '@/functions/gravityForms/getGfFieldValidationSchema'
 
+/**
+ * Render the Fields component.
+ *
+ * @author WebDevStudios
+ * @param {object}   props                   The component attributes as props.
+ * @param {Array}    props.fields            GravityForm fields data.
+ * @param {Function} props.setFormValidation Callback function for setting formValidation state.
+ * @return {Element}                         The Fields component.
+ */
 export default function Fields({fields, setFormValidation}) {
   /**
    * Map through fields to setup form validation.
@@ -34,10 +43,22 @@ export default function Fields({fields, setFormValidation}) {
               fieldToRender = <GfFields.Checkbox {...field.node} key={id} />
               break
 
+            case 'email':
+              fieldToRender = <GfFields.Text {...field.node} key={id} />
+              break
+
+            case 'phone':
+              fieldToRender = <GfFields.Text {...field.node} key={id} />
+              break
+
             case 'text':
               fieldToRender = <GfFields.Text {...field.node} key={id} />
               break
 
+            case 'website':
+              fieldToRender = <GfFields.Text {...field.node} key={id} />
+              break
+
             default:
               fieldToRender = (
                 <pre key={id}>

components/molecules/GravityForm/Fields/Text.js

@@ -3,6 +3,23 @@ import * as Input from '@/components/atoms/Inputs'
 import {getGfFieldId, getGfHiddenClassName} from '@/functions/gravityForms'
 import cn from 'classnames'
 
+/**
+ * Render the GravityForm Text component.
+ *
+ * @author WebDevStudios
+ * @param {object}  props                     GravityForm field props.
+ * @param {string}  props.className           Classname string.
+ * @param {string}  props.description         GravityForm field description.
+ * @param {boolean} props.enablePasswordInput GravityForm password enabled option.
+ * @param {string}  props.errorMessage        GravityForm error message option.
+ * @param {number}  props.id                  GravityForm unique field id.
+ * @param {boolean} props.isRequired          GravityForm isRequired field.
+ * @param {string}  props.label               GravityForm field label.
+ * @param {string}  props.size                GravityForm field size.
+ * @param {string}  props.type                GravityForm field type.
+ * @param {boolean} props.visibility          GravityForm visibility option.
+ * @return {Element}                          The Text component.
+ */
 export default function Text({
   className,
   description,
@@ -18,6 +35,32 @@ export default function Text({
   const fieldId = getGfFieldId(id)
   const isHiddenClass = getGfHiddenClassName(visibility)
 
+  /**
+   * Convert type to an HTML input type.
+   *
+   * @param {string} type GravityForm field type.
+   * @return {string}     HTML input type.
+   */
+  function modifyFieldType(type) {
+    let inputType = type
+
+    if (enablePasswordInput && 'password') {
+      inputType = 'password'
+    }
+
+    if (type === 'phone') {
+      inputType = 'tel'
+    }
+
+    if (type === 'website') {
+      inputType = 'url'
+    }
+
+    return inputType
+  }
+
+  const inputType = modifyFieldType(type)
+
   return (
     <div
       className={cn(className, isHiddenClass) || null}
@@ -29,7 +72,7 @@ export default function Text({
         id={fieldId}
         isRequired={isRequired}
         label={label}
-        type={(enablePasswordInput && 'password') || type}
+        type={inputType}
       />
     </div>
   )

components/molecules/GravityForm/GravityForm.js

@@ -4,7 +4,20 @@ import Fields from './Fields'
 import * as Yup from 'yup'
 import getGfFieldId from '@/functions/gravityForms/getGfFieldId'
 import {useState} from 'react'
+import styles from './GravityForm.module.css'
+import cn from 'classnames'
 
+/**
+ * Render the GravityForm component.
+ *
+ * @param {object} props                   The GravityForm block attributes as props.
+ * @param {object} props.formData          GravityForm form data.
+ * @param {string} props.formData.cssClass GravityForm form classname.
+ * @param {object} props.formData.fields   GravityForm form fields.
+ * @param {number} props.formData.formId   GravityForm form id.
+ * @param {string} props.formData.title    GravityForm form title.
+ * @return {Element}                       The GravityForm component.
+ */
 export default function GravityForm({
   formData: {cssClass, fields, formId, title}
 }) {
@@ -15,8 +28,8 @@ export default function GravityForm({
   /**
    * Map field GravityForm ids and defaults to Object.
    *
-   * @param {Array}   fields Array of fields.
-   * @return {Object} Default field values.
+   * @param {Array} fields Array of fields.
+   * @return {object}      Default field values.
    */
   function getFieldDefaults(fields) {
     const defaults = {}
@@ -43,7 +56,7 @@ export default function GravityForm({
 
   return (
     <Form
-      className={cssClass}
+      className={cn(styles.gravityForm, cssClass)}
       formDefaults={fieldDefaults}
       id={formId && `gform-${formId}`}
       title={title}

components/molecules/GravityForm/GravityForm.module.css

@@ -0,0 +1,5 @@
+.gravityForm {
+  & > div {
+    @apply mb-5;
+  }
+}

functions/gravityForms/getGfFieldValidationSchema.js

@@ -9,8 +9,8 @@ import ArraySchemaFactory from '@/functions/gravityForms/yupSchema/ArraySchemaFa
  *
  * @author WebDevStudios
  * @see https://github.com/jquense/yup#api
- * @param {Object}  fieldData GravityForm field props.
- * @return {Object} Schema validation for field.
+ * @param {object} fieldData GravityForm field props.
+ * @return {object}          Schema validation for field.
  */
 function getValidationSchemaByType(fieldData) {
   let schemaGetter = null
@@ -20,10 +20,22 @@ function getValidationSchemaByType(fieldData) {
       schemaGetter = new ArraySchemaFactory(fieldData).schema
       break
 
+    case 'email':
+      schemaGetter = new StringSchemaFactory(fieldData).schema
+      break
+
+    case 'phone':
+      schemaGetter = new StringSchemaFactory(fieldData).schema
+      break
+
     case 'text':
       schemaGetter = new StringSchemaFactory(fieldData).schema
       break
 
+    case 'website':
+      schemaGetter = new StringSchemaFactory(fieldData).schema
+      break
+
     default:
       return
   }
@@ -35,8 +47,8 @@ function getValidationSchemaByType(fieldData) {
  * Map props to validation schemas.
  *
  * @author WebDevStudios
- * @param {Object}  fieldData GravityForm field props.
- * @return {Object} Schema validation for field.
+ * @param {object} fieldData GravityForm field props.
+ * @return {object}          Schema validation for field.
  */
 export default function getGfFieldValidationSchema(fieldData) {
   return {

functions/gravityForms/yupSchema/StringSchemaFactory.js

@@ -5,7 +5,7 @@ import * as Yup from 'yup'
  *
  * @author WebDevStudios
  * @see https://github.com/jquense/yup#string
- * @return {Object} Yup validationSchema Object.
+ * @return {object} Yup validationSchema Object.
  */
 export default class StringSchemaFactory {
   /**
@@ -14,7 +14,7 @@ export default class StringSchemaFactory {
    * Note: wp-graphql-gravity-forms plugin may need to be replaced.
    *
    * @see https://github.com/harness-software/wp-graphql-gravity-forms
-   * @param {Object} fieldData from GravityForm GraphQL data Object.
+   * @param {object} fieldData from GravityForm GraphQL data Object.
    */
   constructor(fieldData) {
     this.fieldData = fieldData
@@ -26,33 +26,35 @@ export default class StringSchemaFactory {
    * Combine multiple schemas into one.
    *
    * @see https://github.com/jquense/yup#mixedconcatschema-schema-schema
-   * @return {Object} Combined Yup validationSchema Object.
+   * @return {object} Combined Yup validationSchema Object.
    */
   get schema() {
     return Yup.string()
+      .concat(this.getEmailSchema())
       .concat(this.getMaxLengthSchema())
       .concat(this.getRequiredSchema())
+      .concat(this.getUrlSchema())
   }
 
   /**
    * Get Yup required field validaion.
    *
-   * @see https://github.com/jquense/yup#stringrequiredmessage-string--function-schema
-   * @return {Object} Yup validationSchema Object.
+   * @see https://github.com/jquense/yup#stringemailmessage-string--function-schema
+   * @return {object} Yup validationSchema Object.
    */
-  getRequiredSchema() {
-    if (!this.fieldData?.isRequired) {
+  getEmailSchema() {
+    if (this.fieldData?.type !== 'email') {
       return
     }
 
-    return Yup.string().required('Required!')
+    return Yup.string().email(`Must be a valid email.`)
   }
 
   /**
    * Get Yup max line length validation.
    *
    * @see https://github.com/jquense/yup#stringmaxlimit-number--ref-message-string--function-schema
-   * @return {Object} Yup validationSchema Object.
+   * @return {object} Yup validationSchema Object.
    */
   getMaxLengthSchema() {
     if (!this.fieldData?.maxLength) {
@@ -64,4 +66,32 @@ export default class StringSchemaFactory {
       `Must be ${this.fieldData.maxLength} characters or less`
     )
   }
+
+  /**
+   * Get Yup required field validaion.
+   *
+   * @see https://github.com/jquense/yup#stringrequiredmessage-string--function-schema
+   * @return {object} Yup validationSchema Object.
+   */
+  getRequiredSchema() {
+    if (!this.fieldData?.isRequired) {
+      return
+    }
+
+    return Yup.string().required('Required!')
+  }
+
+  /**
+   * Get Yup required field validaion.
+   *
+   * @see https://github.com/jquense/yup#stringurlmessage-string--function-schema
+   * @return {object} Yup validationSchema Object.
+   */
+  getUrlSchema() {
+    if (this.fieldData?.type !== 'website') {
+      return
+    }
+
+    return Yup.string().url(`Must be a valid url "https://example.com".`)
+  }
 }

pages/[...slug].js

@@ -3,9 +3,21 @@ import getPostTypeStaticProps from '@/api/wordpress/_global/getPostTypeStaticPro
 import Layout from '@/components/common/Layout'
 import PropTypes from 'prop-types'
 
+// TODO Remove BlockGravityForm once block support is added.
+// TODO Remove slug based BlockGravityForm from page render.
+import BlockGravityForm from '@/components/blocks/BlockGravityForm'
+
 // Define route post type.
 const postType = 'page'
 
+/**
+ * Render the Page component.
+ *
+ * @author WebDevStudios
+ * @param {object} props      The component attributes as props.
+ * @param {object} props.post Post data from WordPress.
+ * @return {Element}          The Page component.
+ */
 export default function Page({post}) {
   return (
     <Layout
@@ -35,6 +47,7 @@ export default function Page({post}) {
             />
           </article>
         </section>
+        {post.slug === 'form-demo' && <BlockGravityForm {...post?.blocks[0]} />}
       </div>
     </Layout>
   )
@@ -44,7 +57,7 @@ export default function Page({post}) {
  * Get post static paths.
  *
  * @author WebDevStudios
- * @return {Object} Object consisting of array of paths and fallback setting.
+ * @return {object} Object consisting of array of paths and fallback setting.
  */
 export async function getStaticPaths() {
   return await getPostTypeStaticPaths(postType)
@@ -53,11 +66,9 @@ export async function getStaticPaths() {
 /**
  * Get post static props.
  *
- * @param  {Object}  context             Context for current post.
- * @param  {Object}  context.params      Route parameters for current post.
- * @param  {boolean} context.preview     Whether requesting preview of post.
- * @param  {Object}  context.previewData Post preview data.
- * @return {Object}                      Post props.
+ * @param {object} context        Context for current post.
+ * @param {object} context.params Route parameters for current post.
+ * @return {object}               Post props.
  */
 export async function getStaticProps({params}) {
   return getPostTypeStaticProps(params, postType)