@tfehotels/tfe-gatsby-library 1.0.0

package/src/browser/api/types.ts

@@ -0,0 +1,245 @@
+import type { IGatsbyImageData } from "gatsby-plugin-image";
+
+export interface BuildContext {
+  slug: string;
+}
+
+export interface DataAttributeType {
+  [key: string]: any;
+}
+export interface IconType {
+  icon: string;
+  group: string;
+}
+export interface ElementType {
+  name?: string;
+  data: DataAttributeType;
+  icon?: IconType;
+}
+
+export interface TitleType extends ElementType {
+  type: "title";
+  title: string;
+}
+
+export interface UserType {
+  loyaltyprofileId: string;
+  profile_id: string;
+  title: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  zip: string;
+  country_code: string;
+  MobilePhoneCountryCode: string;
+  mobile: string;
+  date_of_birth: string;
+  language: string;
+}
+
+export interface ImageType {
+  type: "image";
+  url: string;
+  optimized: boolean;
+  name: string;
+  alt: string | null;
+  caption: string | null;
+  width: number;
+  height: number;
+  extension: string;
+}
+export interface FileType {
+  url: string;
+  size: number;
+  label: string;
+  extension: string;
+}
+export interface MediaType extends ElementType {
+  type: "file" | "instagram" | "image" | "video";
+  title: string;
+  loading: "eager" | "lazy";
+  image?: ImageType;
+  mobile_image?: ImageType;
+  file?: FileType;
+  mobile_file?: FileType;
+  alt?: string;
+  external_link?: string;
+  page_slug?: string;
+  page?: string;
+}
+
+export interface ImageMediaType extends MediaType {
+  type: "image";
+  imageData?: IGatsbyImageData;
+}
+
+export interface FileMediaType extends MediaType {
+  type: "file";
+  file: FileType;
+}
+
+export interface VideoMediaType extends MediaType {
+  type: "video";
+}
+
+export interface MediaListType {
+  pk: number;
+  type: "medialist";
+  files: MediaType[];
+}
+export interface TextType extends ElementType {
+  type: "text";
+  text: string;
+}
+
+export interface LinkType extends ElementType {
+  type: "link";
+  tag: "a";
+  target?: "_blank" | "_parent" | "_top";
+  text?: string;
+  group?: string;
+  page?: string;
+  page_slug?: string;
+  external_link?: string;
+}
+
+export interface LinkListType extends ElementType {
+  pk: number;
+  type: "linklist";
+  links: LinkType[];
+}
+
+export interface InputType extends ElementType {
+  type: "input";
+  input_name: string;
+  input_type:
+    | "text"
+    | "textarea"
+    | "button"
+    | "checkbox"
+    | "color"
+    | "date"
+    | "datetime-local"
+    | "email"
+    | "file"
+    | "hidden"
+    | "image"
+    | "month"
+    | "number"
+    | "password"
+    | "radio"
+    | "range"
+    | "reset"
+    | "recaptcha2"
+    | "search"
+    | "submit"
+    | "tel"
+    | "time"
+    | "url"
+    | "week"
+    | "google-places";
+  label?: string;
+  min?: string;
+  placeholder?: string;
+  required?: boolean;
+  disabled?: boolean;
+  value?: string;
+  iconOnClick?: Function;
+  description?: string;
+}
+
+export interface SelectType extends Omit<InputType, "type" | "input_type"> {
+  type: "select";
+  input_type: "select";
+  input_name: string;
+  options: { [value: string]: string };
+}
+
+export interface CheckboxType extends Omit<InputType, "type" | "input_type"> {
+  type: "checkbox";
+  input_type: "checkbox";
+}
+
+export interface RecaptchaType extends Omit<InputType, "type" | "input_type"> {
+  type: "recaptcha2";
+  input_type: "recaptcha2";
+}
+
+export interface GoogleSitesType
+  extends Omit<InputType, "type" | "input_type"> {
+  type: "google-places";
+  input_type: "google-places";
+}
+
+export interface ButtonType extends Omit<InputType, "type"> {
+  type: "button";
+  input_type: "button";
+}
+
+export interface SectionType extends ElementType {
+  type: "section";
+  tag?: "section" | "form" | "header" | "footer" | "div" | "nav";
+  pk: number;
+  children?: (
+    | TitleType
+    | TextType
+    | LinkType
+    | LinkListType
+    | InputType
+    | ButtonType
+    | SectionType
+    | SelectType
+    | MediaType
+  )[];
+}
+
+export interface ElementDataType extends ElementType {
+  type: "data";
+  children: any[];
+}
+
+export type AnyElementType =
+  | LinkType
+  | LinkListType
+  | InputType
+  | ButtonType
+  | SectionType
+  | MediaType;
+
+export interface FormSectionType extends Omit<SectionType, "children"> {
+  name: string;
+  recaptcha_v3?: boolean;
+  form_method?: "post" | "get";
+  form_ajax_request?: boolean;
+  form_submit?: string;
+  form_success_msg?: string;
+  form_recipient?: number;
+  children: (InputType | SelectType)[];
+}
+
+export interface PageParamsType {
+  data: any;
+  hotel: null | string;
+  tags: { [k: string]: string };
+}
+
+export interface LocationType {
+  hash: string;
+  host: string;
+  hostname: string;
+  href: string;
+  key: string;
+  origin: string;
+  pathname: string;
+  port: string;
+  protocol: string;
+  search: string;
+}
+
+export interface DefaultPropsType extends Omit<SectionType, "children"> {
+  className: string;
+  children: AnyElementType[];
+  pageParams: PageParamsType;
+  location: LocationType;
+  user: null | UserType;
+}

package/src/browser/carousel/buttons/index.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useEffect, useState } from "react"
+import { EmblaCarouselType } from "embla-carousel"
+import { PropType, UseButtonsType } from "./types"
+
+export const useButtons = (
+  emblaApi: EmblaCarouselType | undefined,
+  showButtons: boolean | undefined
+): UseButtonsType => {
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)
+
+  const onPrevButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const onNextButtonClick = useCallback(() => {
+    if (!emblaApi) return
+    emblaApi.scrollNext()
+  }, [emblaApi])
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setPrevBtnDisabled(!emblaApi.canScrollPrev())
+    setNextBtnDisabled(!emblaApi.canScrollNext())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi || !showButtons) return
+
+    onSelect(emblaApi)
+    emblaApi.on("reInit", onSelect)
+    emblaApi.on("select", onSelect)
+  }, [emblaApi, onSelect])
+
+  return {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  }
+}
+
+export const PrevButton: React.FC<PropType> = props => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className="embla__button embla__button--prev"
+      type="button"
+      {...restProps}
+    >
+      <svg className="embla__button__svg" viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M355.66 11.354c13.793-13.805 36.208-13.805 50.001 0 13.785 13.804 13.785 36.238 0 50.034L201.22 266l204.442 204.61c13.785 13.805 13.785 36.239 0 50.044-13.793 13.796-36.208 13.796-50.002 0a5994246.277 5994246.277 0 0 0-229.332-229.454 35.065 35.065 0 0 1-10.326-25.126c0-9.2 3.393-18.26 10.326-25.2C172.192 194.973 332.731 34.31 355.66 11.354Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}
+
+export const NextButton: React.FC<PropType> = props => {
+  const { children, ...restProps } = props
+
+  return (
+    <button
+      className="embla__button embla__button--next"
+      type="button"
+      {...restProps}
+    >
+      <svg className="embla__button__svg" viewBox="0 0 532 532">
+        <path
+          fill="currentColor"
+          d="M176.34 520.646c-13.793 13.805-36.208 13.805-50.001 0-13.785-13.804-13.785-36.238 0-50.034L330.78 266 126.34 61.391c-13.785-13.805-13.785-36.239 0-50.044 13.793-13.796 36.208-13.796 50.002 0 22.928 22.947 206.395 206.507 229.332 229.454a35.065 35.065 0 0 1 10.326 25.126c0 9.2-3.393 18.26-10.326 25.2-45.865 45.901-206.404 206.564-229.332 229.52Z"
+        />
+      </svg>
+      {children}
+    </button>
+  )
+}

package/src/browser/carousel/buttons/types.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from "react"
+
+export type UseButtonsType = {
+  prevBtnDisabled: boolean
+  nextBtnDisabled: boolean
+  onPrevButtonClick: () => void
+  onNextButtonClick: () => void
+}
+
+export type PropType = PropsWithChildren<
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
+>

package/src/browser/carousel/dots/index.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useEffect, useState } from "react"
+import { EmblaCarouselType } from "embla-carousel"
+import { PropType, UseDotsType } from "./types"
+
+export const useDots = (
+  emblaApi: EmblaCarouselType | undefined,
+  showDots: boolean | undefined
+): UseDotsType => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [scrollSnaps, setScrollSnaps] = useState<number[]>([])
+
+  const onDotButtonClick = useCallback(
+    (index: number) => {
+      if (!emblaApi) return
+      emblaApi.scrollTo(index)
+    },
+    [emblaApi]
+  )
+
+  const onInit = useCallback((emblaApi: EmblaCarouselType) => {
+    setScrollSnaps(emblaApi.scrollSnapList())
+  }, [])
+
+  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
+    setSelectedIndex(emblaApi.selectedScrollSnap())
+  }, [])
+
+  useEffect(() => {
+    if (!emblaApi || !showDots) return
+
+    onInit(emblaApi)
+    onSelect(emblaApi)
+    emblaApi.on("reInit", onInit)
+    emblaApi.on("reInit", onSelect)
+    emblaApi.on("select", onSelect)
+  }, [emblaApi, onInit, onSelect])
+
+  return {
+    selectedIndex,
+    scrollSnaps,
+    onDotButtonClick,
+  }
+}
+
+export const DotButton: React.FC<PropType> = props => {
+  const { children, ...restProps } = props
+
+  return (
+    <button type="button" {...restProps}>
+      {children}
+    </button>
+  )
+}

package/src/browser/carousel/dots/types.ts

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from "react"
+
+export type UseDotsType = {
+  selectedIndex: number
+  scrollSnaps: number[]
+  onDotButtonClick: (index: number) => void
+}
+
+export type PropType = PropsWithChildren<
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
+>

package/src/browser/carousel/index.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useEffect, useState } from "react"
+import { EmblaCarouselType } from "embla-carousel"
+import { CarouselPropsType } from "./types"
+import { useButtons } from "./buttons"
+import { useDots,DotButton } from "./dots"
+import { NextButton, PrevButton } from "./buttons"
+
+
+
+const Carousel: React.FC<CarouselPropsType> = ({
+  id,
+  emblaRef,
+  emblaApi,
+  slidesPerView,
+  slidesPerViewport,
+  slides,
+  gap,
+  showButtons,
+  showDots,
+  showProgress,
+}) => {
+  const [scrollProgress, setScrollProgress] = useState(0)
+  const { selectedIndex, scrollSnaps, onDotButtonClick } = useDots(
+    emblaApi,
+    showDots
+  )
+
+  // Calculate Carousel progress
+  const onScroll = useCallback((emblaApi: EmblaCarouselType) => {
+    const progress = Math.max(0, Math.min(1, emblaApi.scrollProgress()))
+    setScrollProgress(progress * 100)
+  }, [])
+
+  const {
+    prevBtnDisabled,
+    nextBtnDisabled,
+    onPrevButtonClick,
+    onNextButtonClick,
+  } = useButtons(emblaApi, showButtons)
+
+  useEffect(() => {
+    if (!emblaApi || !showProgress) return
+
+    onScroll(emblaApi)
+    emblaApi.on("reInit", onScroll)
+    emblaApi.on("scroll", onScroll)
+  }, [emblaApi, onScroll])
+
+  return (
+    <div id={id} className={`embla`}>
+      <div className="embla__viewport" ref={emblaRef}>
+        <div className="embla__container">
+          {slides.map((slide, k) => (
+            <div className="embla__slide" key={`embla-${k}`}>
+              {slide}
+            </div>
+          ))}
+        </div>
+      </div>
+      {showButtons && (
+        <>
+          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled} />
+          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled} />
+        </>
+      )}
+      {showDots && (
+        <div className="embla__dots">
+          {scrollSnaps.map((_: any, index: number) => (
+            <DotButton
+              key={index}
+              onClick={() => onDotButtonClick(index)}
+              className={"embla__dot".concat(
+                index === selectedIndex ? " embla__dot--selected" : ""
+              )}
+            />
+          ))}
+        </div>
+      )}
+      {!!showProgress && (
+        <div className="embla__progress">
+          <div
+            className="embla__progress__bar"
+            style={{ transform: `translate3d(${scrollProgress}%,0px,0px)` }}
+          />
+        </div>
+      )}
+      <style>
+        {`
+            #${id} .embla__container{
+                margin-left: calc(${gap ? gap : 0}px * -1);
+            }
+            #${id} .embla__slide{
+                flex: 0 0 ${(100 / slidesPerView).toFixed(2)}%;
+                padding-left: ${gap ? gap : 0}px;
+            }
+            ${
+              slidesPerViewport
+                ? Object.entries(slidesPerViewport).map(([screenSize, n]) => {
+                    let media = "max-width"
+                    let gap: number | null = null
+                    let slides = n as number
+                    if (typeof n === "object") {
+                      slides = n.slides
+                      if (n.media) {
+                        media = n.media
+                      }
+                      if (n.gap) {
+                        gap = n.gap
+                      }
+                    }
+                    return `@media (${media}: ${screenSize}px) {
+                        ${
+                          gap !== null
+                            ? `#${id} .embla__container{margin-left: calc(${gap}px * -1);}`
+                            : ""
+                        } 
+                        #${id} .embla__slide {
+                          flex: 0 0 ${(100 / slides).toFixed(2)}%;
+                          ${gap !== null ? `padding-left: ${gap}px;` : ""}
+                        }
+                    }`
+                  })
+                : ""
+            }
+        `}
+      </style>
+    </div>
+  )
+}
+
+export default Carousel

package/src/browser/carousel/types.ts

@@ -0,0 +1,21 @@
+import { EmblaCarouselType, EmblaOptionsType } from "embla-carousel";
+export interface viewPortType {
+  slides: number;
+  media?: "max-width" | "min-width";
+  gap?: number;
+}
+export interface CarouselPropsType {
+  id: string;
+  emblaRef: any;
+  emblaApi?: EmblaCarouselType;
+  slidesPerView: number;
+  slidesPerViewport?: {
+    [screenSize: number]: number | viewPortType;
+  };
+  slides: React.ReactNode[];
+  options?: EmblaOptionsType;
+  showButtons?: boolean;
+  showDots?: boolean;
+  gap?: number;
+  showProgress?: boolean;
+}

package/src/browser/markdown/index.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { marked } from "marked"
+import parse from "html-react-parser"
+import { MarkdownPropsType } from "./types"
+
+export default function Markdown({
+  children,
+  className,
+  tagAttrs,
+  onClick,
+}: MarkdownPropsType) {
+  const renderer = new marked.Renderer()
+  renderer.link = (href, title, text) => {
+    let attrs = {
+      href: href,
+      title: title ?? "",
+      target: "_blank",
+    }
+    if (tagAttrs?.a) {
+      attrs = { ...attrs, ...tagAttrs?.a }
+    }
+    return `<a ${Object.entries(attrs)
+      .map(([k, v]) => `${k}="${v}"`)
+      .join(" ")}>${text}</a>`
+  }
+  marked.setOptions({ renderer })
+
+  const createMarkup = () => parse(children ? (marked(children) as string) : "")
+
+  return (
+    <>
+      {className || onClick ? (
+        <div className={className} onClick={onClick}>
+          {createMarkup()}
+        </div>
+      ) : (
+        <>{createMarkup()}</>
+      )}
+    </>
+  )
+}

package/src/browser/markdown/types.ts

@@ -0,0 +1,11 @@
+import { MouseEventHandler } from "react"
+
+export interface TagAttributesType {
+  [tag: string]: { [attr: string]: string }
+}
+export interface MarkdownPropsType {
+  className?: string
+  children: string
+  tagAttrs?: TagAttributesType
+  onClick?: MouseEventHandler<HTMLDivElement>
+}

package/src/browser/modal/index.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from "react"
+import { ModalPropsType } from "./types"
+import Icon from "../api/icon"
+
+const Modal = ({
+  modalId,
+  show,
+  className,
+  setShowModal,
+  children,
+}: ModalPropsType) => {
+  useEffect(() => {
+    document.body.style.overflow = show ? "hidden" : "unset"
+  }, [show])
+  return (
+    <div
+      className={`modal-layout${show ? " opened" : ""}`}
+      onClick={e => {
+        // Close Modal when clicking outside:
+        if (e.target === e.currentTarget) {
+          setShowModal(modalId, false)
+        }
+      }}
+    >
+      <div className={`modal${className ? ` ${className}` : ""}`}>
+        <div className="modal-body">{children}</div>
+        <button className="close" onClick={() => setShowModal(modalId, false)}>
+          <Icon icon={{ icon: "times", group: "FAS" }} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Modal

package/src/browser/modal/types.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react"
+
+export interface ModalPropsType {
+  modalId: string
+  className?: string
+  show: boolean
+  setShowModal: Function
+  children: ReactNode
+}

package/src/browser/spinner/index.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { SpinnerPropsType } from "./types"
+
+export default function Spinner({ color, size, className }: SpinnerPropsType) {
+  return (
+    <div
+      className={`spinner-box${className ? ` ${className}` : ""}`}
+    >
+      <div
+        className="spinner"
+        style={{
+          border: `5px solid ${color ? color : "white"}`,
+          width: size ? size : 45,
+          height: size ? size : 45,
+        }}
+      ></div>
+    </div>
+  )
+}

package/src/browser/spinner/types.ts

@@ -0,0 +1,5 @@
+export interface SpinnerPropsType {
+  className?: string
+  color?: string
+  size?: number | string
+}