@tfehotels/tfe-gatsby-library 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tfehotels/tfe-gatsby-library",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Shared functions and utilities for TFE's Gatsby websites.",
   "main": "./lib/index.node.cjs",
   "module": "./lib/index.node.esm.js",
@@ -31,8 +31,7 @@
     "type:gen": "./scripts/typegen.sh"
   },
   "files": [
-    "/lib",
-    "/src"
+    "/lib" 
   ],
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",

package/src/browser/api/button/index.tsx

@@ -1,16 +0,0 @@
-import React from "react"
-import { ButtonPropsType } from "./types"
-
-const Button: React.FC<ButtonPropsType> = ({ ...props }) => {
-  return (
-    <button
-      className={props.className}
-      type={props.input_type ?? "button"}
-      onClick={props.onClick}
-    >
-      {props.value}
-    </button>
-  )
-}
-
-export default Button;

package/src/browser/api/button/types.ts

@@ -1,7 +0,0 @@
-import { MouseEventHandler } from "react";
-import { ButtonType } from "../types";
-
-export interface ButtonPropsType extends ButtonType {
-  className?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-}

package/src/browser/api/checkbox/index.tsx

@@ -1,74 +0,0 @@
-import React from "react"
-import { CheckboxPropsType } from "./types"
-import Markdown from "../../markdown"
-// import { motion, useMotionValue, useTransform } from "framer-motion"
-
-// const tickVariants = {
-//   pressed: (isChecked: boolean) => ({ pathLength: isChecked ? 0.85 : 0.2 }),
-//   checked: { pathLength: 1 },
-//   unchecked: { pathLength: 0 },
-// }
-
-// const boxVariants = {
-//   hover: { scale: 1.05, strokeWidth: 4 },
-//   pressed: { scale: 0.95, strokeWidth: 4 },
-//   checked: { stroke: "#b4b2e6" },
-//   unchecked: { stroke: "#b4b2e6", strokeWidth: 4 },
-// }
-
-export default function Checkbox({
-  className,
-  label,
-  description,
-  ...props
-}: CheckboxPropsType) {
-  // const pathLength = useMotionValue(0)
-  // const opacity = useTransform(pathLength, [0.05, 0.15], [0, 1])
-
-  return (
-    <label
-      className={`checkbox ${className ? ` ${className}` : ""}`}
-      onClick={props.onClick}
-      onChange={props.onChange}
-    >
-      {!!label && <span>{label}</span>}
-      <svg
-        id={props.id}
-        // initial={props.value}
-        // animate={props.value ? "checked" : "unchecked"}
-        // whileHover="hover"
-        // whileTap="pressed"
-        width={props.width ? props.width : 30}
-        height={props.height ? props.height : 30}
-        viewBox="0 0 440 440"
-      >
-        <path
-          d="M 72 136 C 72 100.654 100.654 72 136 72 L 304 72 C 339.346 72 368 100.654 368 136 L 368 304 C 368 339.346 339.346 368 304 368 L 136 368 C 100.654 368 72 339.346 72 304 Z"
-          fill={props.color ? props.color : "#58595b"}
-          strokeWidth={3}
-          stroke="#FF008C"
-          // variants={boxVariants}
-        />
-        <path
-          // d="M 90 110 L 128 240 L 341.808 0"
-          d="M 160 180 L 210 250  L 340 130"
-          // transform="translate(54.917 68.947) rotate(-4 170.904 18.687)"
-          transform="translate(40 65) rotate(-10 70.904 438.687)"
-          fill="transparent"
-          strokeWidth={30}
-          stroke="white"
-          strokeLinecap="square"
-          strokeLinejoin="miter"
-          // variants={tickVariants}
-          // style={{ pathLength, opacity }}
-          // custom={props.value}
-        />
-      </svg>
-      {!!description && (
-        <div>
-          <Markdown>{description}</Markdown>
-        </div>
-      )}
-    </label>
-  )
-}

package/src/browser/api/checkbox/types.tsx

@@ -1,21 +0,0 @@
-import { MouseEventHandler, ChangeEventHandler } from "react"
-
-export interface CheckboxPropsType {
-  onClick?: MouseEventHandler<HTMLLabelElement>
-  onChange?: ChangeEventHandler<HTMLLabelElement>
-  className?: string
-  value: boolean
-  width?: number
-  height?: number
-  id?: string
-  name?: string
-  input_name?: string
-  color?: string
-  accept?: string
-  label?: string
-  description?: string
-}
-
-export interface CheckboxesTypes {
-  [key: string]: any
-}

package/src/browser/api/country-prefix/index.tsx

@@ -1,150 +0,0 @@
-import React, {
-  startTransition,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react"
-import { PhonePropsType } from "./types"
-import { countryPrefixes } from "../../utils/location"
-import { scrollToChild } from "../../utils/viewport"
-import Markdown from "../../markdown"
-
-export default function CountryPrefix({
-  className,
-  label,
-  description,
-  input_name,
-  onClick,
-  onChange,
-  value,
-  ...props
-}: PhonePropsType) {
-  const [showOptions, setShowOptions] = useState<boolean>(false)
-  const [focused, setFocused] = useState<number>(0)
-  const [input, setInput] = useState("")
-  const listRef = useRef<HTMLUListElement>(null)
-
-  const handleSelection = useCallback(
-    (focused: number) => {
-      onChange?.(countryPrefixes[focused][1] as any)
-      startTransition(() => {
-        setShowOptions(false)
-        setFocused(focused)
-      })
-    },
-    [onChange, countryPrefixes]
-  )
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLUListElement>) => {
-    e.stopPropagation()
-    e.preventDefault()
-    const { key } = e
-    if (key === "ArrowDown" || key === "ArrowUp") {
-      // Logic to navigate through the list items
-      startTransition(() => {
-        setFocused(
-          key === "ArrowDown"
-            ? Math.min(focused + 1, countryPrefixes.length - 1)
-            : Math.max(focused - 1, 0)
-        )
-        setInput("")
-      })
-    } else if (key === "Escape") {
-      startTransition(() => setShowOptions(false))
-    } else if (key === "Enter") {
-      handleSelection(focused)
-    } else if (key === "Backspace") {
-      startTransition(() => setInput(input.slice(0, -1)))
-    } else if (/^[ \p{L}]+$/u.test(key)) {
-      startTransition(() => setInput(input + key))
-    }
-  }
-
-  const scrollToFocusedCountry = useCallback(() => {
-    if (!listRef.current) return
-    const element = listRef.current.querySelector(
-      `#${props.name ?? "country-prefix"}__${countryPrefixes[focused][0]}`
-    )
-    if (!element) return
-    scrollToChild(listRef.current, element as HTMLElement)
-  }, [focused, countryPrefixes])
-
-  // Focus selected option based on input
-  useEffect(() => {
-    if (!input) return
-    let foundIndex = countryPrefixes.findIndex(row =>
-      row[2].toLowerCase().startsWith(input.toLowerCase())
-    )
-    if (foundIndex >= 0) {
-      startTransition(() => setFocused(foundIndex))
-    } else {
-      startTransition(() => setInput(""))
-    }
-  }, [input])
-
-  useEffect(() => {
-    scrollToFocusedCountry()
-  }, [focused])
-
-  useEffect(() => {
-    if (!listRef.current) return
-    if (showOptions) {
-      // Autofocus on open dropdown
-      listRef.current.focus()
-      return
-    }
-
-    startTransition(() => setInput(""))
-  }, [showOptions])
-
-  return (
-    <label
-      className={`country-prefix ${className ? ` ${className}` : ""}`}
-    >
-      {!!label && <span>{label}</span>}
-      <div
-        className="selected-prefix"
-        onClick={() => {
-          startTransition(() => setShowOptions(true))
-          listRef?.current?.focus()
-        }}
-      >
-        +{value ?? countryPrefixes[0][1]}
-        &gt;
-      </div>
-      <ul
-        className={showOptions ? "show" : ""}
-        ref={listRef}
-        role="listbox"
-        tabIndex={-1}
-        onKeyDown={handleKeyDown}
-        aria-activedescendant={`${props.name ?? "country-prefix"}__${
-          countryPrefixes[focused][0]
-        }`}
-      >
-        {countryPrefixes.map(([countryCode, prefix, name], k) => {
-          return (
-            <li
-              className={k === focused ? "selected" : ""}
-              role="option"
-              onClick={() => handleSelection(k)}
-              aria-selected={k === focused}
-              aria-label={`${name} +${prefix}`}
-              id={`${props.name ?? "country-prefix"}__${countryCode}`}
-              key={`${props.name ?? "country-prefix"}__${countryCode}`}
-            >
-              {name} +{prefix}
-            </li>
-          )
-        })}
-      </ul>
-      <input type="hidden" name={input_name} />
-      {!!description && (
-        <div>
-          <Markdown>{description}</Markdown>
-        </div>
-      )}
-    </label>
-  )
-}

package/src/browser/api/country-prefix/types.tsx

@@ -1,17 +0,0 @@
-import { MouseEventHandler, ChangeEventHandler } from "react"
-
-export interface PhonePropsType {
-  onClick?: MouseEventHandler<HTMLLabelElement>
-  onChange?: ChangeEventHandler<HTMLLabelElement>
-  className?: string
-  value: string
-  width?: number
-  height?: number
-  id?: string
-  name?: string
-  input_name?: string
-  color?: string
-  accept?: string
-  label?: string
-  description?: string
-}

package/src/browser/api/form/index.tsx

@@ -1,330 +0,0 @@
-import { useGoogleReCaptcha } from "react-google-recaptcha-v3"
-import React, { startTransition, useCallback, useEffect } from "react"
-import { ErrorsType, FormPropsType } from "./types"
-import { toastMsg } from "../../utils/notifications"
-import {
-  INPUT_FIELDS,
-  getInputEventValue,
-  getInputHumanValue,
-  json_request,
-} from "../../utils/forms"
-import type {  
-  FormFieldsType,
-  FormItemType,
-} from "../../utils/types"
-import classNames from "classnames"
-import Markdown from "../../markdown"
-import Spinner from "../../spinner"
-
-const Element: any = <div/> //React.lazy(() => import(<div/>))
-
-
-export default function Form({
-  className,
-  form,
-  setForm,
-  errors,
-  setErrors,
-  beforeSubmit,
-  formatParams,
-  validate,
-  validateResponse,
-  onSuccess,
-  onFocus,
-  onBlur,
-  onClick,
-  onChange,
-  onError,
-  afterSubmit,
-  loading,
-}: FormPropsType) {
-  const { executeRecaptcha } = useGoogleReCaptcha()
-
-  const showErrors = (errors: ErrorsType, showInputName: boolean = true) => (
-    <div>
-      <ul className={"error"}>
-        {Object.entries(errors).map(([input, error], k: number) => (
-          <li key={`error-form${k}`}>
-            X
-            <span>
-              {showInputName ? <strong>{input}:</strong> : ""} {error}
-            </span>
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    let errors: any = {}
-    let params = Object.values(form.fields).reduce((acc, field) => {
-      if (INPUT_FIELDS.has(field.type)) {
-        // @ts-ignore
-        if (field.required && !field.value) {
-          //@ts-ignore
-          errors[field.input_name] = `${
-            //@ts-ignore
-            field.label ? field.label : field.placeholder
-          } is required`
-          return acc
-        }
-        // @ts-ignore
-        // Skip non-checked radio buttons
-        if (field.input_type === "radio" && !field.checked) {
-          return acc
-        }
-        // @ts-ignore
-        acc[field.input_name] = getInputHumanValue(field.type, field.value)
-      }
-      return acc
-    }, {} as any)
-
-    // Get reCAPTCHA v3 token
-    if (form.settings.recaptcha_v3) {
-      params.recaptcha_token = await verifyRecaptcha()
-      if (!params.recaptcha_token) {
-        errors.recaptcha = "reCAPTCHA failed!"
-      }
-    }
-
-    // Check recaptcha v2 if it's within the fields
-    if (form.fields.recaptcha && !params.recaptcha) {
-      errors.recaptcha = "Recaptcha is mandatory"
-    }
-
-    if (validate) {
-      errors = { ...errors, ...validate(form.fields, params) }
-    }
-    if (Object.keys(errors).length) {
-      startTransition(() => {
-        setErrors(errors)
-        toastMsg(showErrors(errors, false))
-      })
-      return
-    }
-
-    if (beforeSubmit) {
-      beforeSubmit(form)
-    }
-
-    if (formatParams) {
-      params = formatParams(params)
-    }
-
-    // If is not an AJAX request, the page will be redirected into the form submit URL
-    if (!form.settings.form_ajax_request) {
-      // @ts-ignore
-      return e.target.submit()
-    }
-    const response = await json_request(
-      form.settings.form_submit,
-      params,
-      form.settings.form_method,
-      form.settings.form_recipient
-        ? {
-            "recipient-id": `${form.settings.form_recipient}`,
-          }
-        : {}
-    )
-    startTransition(() => {
-      // ON SUCCESS:
-      if (
-        response.status === 200 &&
-        (!validateResponse || validateResponse(response))
-      ) {
-        if (onSuccess) {
-          // Execute onSuccess action when defined:
-          onSuccess(response, form.settings.form_success_msg)
-        } else {
-          // Otherwise just show success message:
-          toastMsg(
-            form.settings.form_success_msg ? (
-              <Markdown>{form.settings.form_success_msg}</Markdown>
-            ) : (
-              "Success! Your form has been successfully sent. Thank you for reaching out, we will get back to you as soon as possible."
-            ),
-            "success"
-          )
-        }
-
-        if (form.settings.form_redirection) {
-          setTimeout(() => {
-            window.location.href = form.settings.form_redirection as string
-          }, 3000)
-        }
-
-        // Reset all form values:
-        setForm({
-          ...form,
-          fields: Object.entries(form.fields).reduce((acc, [name, field]) => {
-            acc[name] = INPUT_FIELDS.has(field.type) // @ts-ignore
-              ? { ...field, value: "" }
-              : field
-            return acc
-          }, {} as FormFieldsType),
-        })
-        // ON ERROR:
-      } else if (onError) {
-        onError(response)
-        // ELSE ON ERROR:
-      } else if (response.errors) {
-        let newErrors: ErrorsType = Object.entries(response.errors).reduce(
-          (acc, [inputName, errorList]) => {
-            acc[inputName] = errorList.join(", ")
-            return acc
-          },
-          {} as ErrorsType
-        )
-        toastMsg(showErrors(newErrors))
-        setErrors(newErrors)
-        // ELSE ON ERROR:
-      } else if (response.error) {
-        toastMsg(
-          showErrors(
-            {
-              failed: response.error ? (
-                <Markdown>{response.error}</Markdown>
-              ) : (
-                "Oops. Something went wrong. Please try again later, or contact us at members@tfehotels.com"
-              ),
-            },
-            false
-          )
-        )
-      }
-    })
-
-    if (afterSubmit) {
-      afterSubmit(response)
-    }
-  }
-
-  const verifyRecaptcha = useCallback(async () => {
-    if (!executeRecaptcha) {
-      console.log("Execute recaptcha not yet available")
-      return
-    }
-    return await executeRecaptcha(form.settings.recaptcha_action)
-  }, [executeRecaptcha])
-
-  useEffect(() => {
-    if (form.settings.recaptcha_v3) {
-      verifyRecaptcha()
-    }
-  }, [form.settings.recaptcha_v3, verifyRecaptcha])
-
-  const buildFormElement = (item: FormItemType) => {
-    if (typeof item === "string") {
-      const field: any = form.fields[item]
-      return (
-        <div
-          className={`${field.type} ${field.type}-${field.name}`}
-          key={`ff-${form.settings.pk}-${item}`}
-        >
-          {INPUT_FIELDS.has(field.type) ? (
-            <Element
-              className={classNames({
-                [field.data.class]: Boolean(field.data.class),
-                error: Boolean(errors[item]),
-              })}
-              onFocus={(e: React.FocusEvent) => {
-                if (onFocus) onFocus(e)
-              }}
-              onBlur={(e: React.FocusEvent) => {
-                if (onBlur) onBlur(e)
-              }}
-              onClick={(e: React.MouseEvent) => {
-                // Only for checkboxes/Radios
-                if (["checkbox", "radio"].includes(field.input_type)) {
-                  let newForm = { ...form }
-                  if (field.input_type === "checkbox") {
-                    newForm.fields = {
-                      ...form.fields,
-                      [item]: { ...field, value: !field.value },
-                    }
-                  } else {
-                    // Radio buttons (sets the "checked" flag on all radio buttons with same name)
-                    newForm.fields = Object.entries(form.fields).reduce(
-                      (acc, [fieldName, attrs]) => {
-                        acc[fieldName] = attrs //@ts-ignore
-                        if (attrs.input_name === field.input_name) {
-                          //@ts-ignore
-                          acc[fieldName].checked = //@ts-ignore
-                            field.value === acc[fieldName].value
-                        }
-                        return acc
-                      },
-                      {} as FormFieldsType
-                    )
-                  }
-                  startTransition(() => {
-                    setForm(newForm)
-                    if (errors[item]) {
-                      setErrors({}) // reset errors
-                    }
-                  })
-                }
-                if (onClick) onClick(e)
-              }}
-              checked={
-                field.input_type === "radio" ? !!field.checked : undefined
-              }
-              onChange={(e: any) => {
-                if (!["checkbox", "radio"].includes(field.input_type)) {
-                  startTransition(() => {
-                    setForm({
-                      ...form,
-                      fields: {
-                        ...form.fields,
-                        [item]: {
-                          ...field,
-                          value: getInputEventValue(field.type, e),
-                          data: e.target?.data
-                            ? { ...field.data, ...e.target.data }
-                            : field.data,
-                        },
-                      },
-                    })
-
-                    if (errors[item]) {
-                      setErrors({}) // reset errors
-                    }
-                  })
-                }
-                if (onChange) onChange(e)
-              }}
-              {...{
-                ...field,
-                value: field.value ? field.value : "",
-              }}
-            />
-          ) : (
-            // Display Titles, Texts, Links, etc..
-            <Element {...field} />
-          )}
-        </div>
-      )
-    }
-    // Otherwise is a section
-    return (
-      <div
-        className={`form-section ${item.name}`}
-        key={`ff-${form.settings.pk}-${item.name}`}
-      >
-        {item.children.map(buildFormElement)}
-      </div>
-    )
-  }
-  return (
-    <form
-      className={className}
-      action={form.settings.form_submit}
-      method={form.settings.form_method}
-      onSubmit={e => handleSubmit(e)}
-      noValidate
-    >
-      {loading ? <Spinner color="#00b5ee" /> : form.items.map(buildFormElement)}
-    </form>
-  )
-}

package/src/browser/api/form/types.ts

@@ -1,31 +0,0 @@
-import { ReactNode } from "react";
-import { InputType } from "../types";
-import { FormType } from "../../utils/types";
-
-export interface InputsType {
-  [field: string]: InputType;
-}
-
-export interface ErrorsType {
-  [field: string]: string | ReactNode;
-}
-
-export interface FormPropsType {
-  className?: string;
-  form: FormType;
-  setForm: Function;
-  errors: ErrorsType;
-  loading?: boolean;
-  setErrors: Function;
-  beforeSubmit?: Function;
-  formatParams?: Function;
-  validate?: Function;
-  validateResponse?: Function;
-  onSuccess?: Function;
-  onFocus?: Function;
-  onBlur?: Function;
-  onClick?: Function;
-  onChange?: Function;
-  onError?: Function;
-  afterSubmit?: Function;
-}