@tfehotels/tfe-gatsby-library 1.0.0

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

@@ -0,0 +1,91 @@
+import React from "react"
+import {
+  GatsbyImage,
+  getImage,
+  withArtDirection,
+  IGatsbyImageData,
+} from "gatsby-plugin-image"
+import { ImageType } from "../types"
+import { ImagePropsType } from "./types"
+import classNames from "classnames"
+
+const buildImage = (img: ImageType): IGatsbyImageData | undefined => {
+  if (!img) {
+    return undefined
+  }
+
+  let fallback = {
+    src: img.url,
+    sizes: "100vw",
+    srcSet: "",
+  }
+  let sources = []
+  let placeholder = { fallback: img.url }
+  const sizes = [img.width, 360, 769, 1024, 1216, 1408].sort((a, b) => a - b)
+
+  if (img.optimized) {
+    fallback.src = img.url + img.name + "-" + img.width + "w.jpg"
+    placeholder.fallback = img.url + img.name + "-20w.jpg"
+    sources.push({ sizes: "100vw", srcSet: "", type: "image/avif" })
+    sources.push({ sizes: "100vw", srcSet: "", type: "image/webp" })
+    for (let index in sizes) {
+      if (sizes[index] > img.width) {
+        break
+      }
+      let image_url =
+        (index === "0" ? "" : ",") + img.url + img.name + "-" + sizes[index]
+      fallback.srcSet += image_url + "w.jpg " + sizes[index] + "w"
+      sources[0].srcSet += image_url + "w.avif " + sizes[index] + "w"
+      sources[1].srcSet += image_url + "w.webp " + sizes[index] + "w"
+    }
+  }
+
+  return getImage({
+    childImageSharp: {
+      gatsbyImageData: {
+        backgroundColor: "transparent",
+        height: img.height / img.width,
+        width: 1,
+        layout: "fullWidth",
+        placeholder: placeholder,
+        images: {
+          fallback: fallback,
+          sources: sources,
+        },
+      },
+    },
+  })
+}
+
+const Image = ({ imageData, ...props }: ImagePropsType) => {
+  const initImage = () => {
+    const image_data = buildImage(props.image as ImageType)
+    const mobile_image_data = buildImage(props.mobile_image as ImageType)
+    return image_data && mobile_image_data // If mobile image exists, it must be added using Art Direction.
+      ? withArtDirection(image_data, [
+          {
+            media: "(max-width: 768px)",
+            image: mobile_image_data,
+          },
+        ])
+      : image_data
+  }
+  let image = imageData ?? initImage()
+
+  return image ? (
+    <GatsbyImage
+      className={classNames({
+        ["mobile-img"]: !!props.image && !!props.mobile_image,
+        [props.className as string]: !!props.className,
+      })}
+      image={image}
+      onLoad={props.onLoad}
+      alt={props.image?.alt ? props.image.alt : ""}
+      style={props.style}
+    />
+  ) : (
+    <span>Missing image!</span>
+  )
+}
+
+export default Image

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { MediaType } from "../types";
+import { IGatsbyImageData } from "gatsby-plugin-image";
+
+export interface ImagePropsType extends MediaType {
+  type: "image";
+  className?: string;
+  style?: React.CSSProperties;
+  onLoad?: any;
+  imageData?: IGatsbyImageData;
+}

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

@@ -0,0 +1,44 @@
+import React from "react"
+import { InputPropsType } from "./types"
+import Markdown from "../../markdown"
+import Icon from "../icon"
+
+
+const Input = ({
+  label,
+  type,
+  input_type,
+  description,
+  name,
+  input_name,
+  icon,
+  iconOnClick,
+  read_only,
+  ...props
+}: InputPropsType) => {
+  return (
+    <label
+      className={`input label-${name}${
+        input_type === "hidden" ? " hidden" : ""
+      }`}
+    >
+      {!!label && <span>{label}</span>}
+      {!!icon && <Icon icon={icon} onClick={iconOnClick} />}
+      <input
+        type={input_type}
+        name={input_name}
+        readOnly={read_only}
+        {...props}
+      />
+      {!!description && (
+        <div className="desc">
+          <div>
+            <Markdown>{description}</Markdown>
+          </div>
+        </div>
+      )}
+    </label>
+  )
+}
+
+export default Input

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

@@ -0,0 +1,10 @@
+import { ChangeEventHandler } from "react";
+import { DataAttributeType, InputType } from "../types";
+
+export interface InputPropsType extends Omit<InputType, "type" | "data"> {
+  type?: "input";
+  data?: DataAttributeType;
+  className?: string;
+  read_only?: boolean;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+}

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

@@ -0,0 +1,54 @@
+import React, { useState } from "react"
+import { Link as PageLink } from "gatsby"
+import { LinkPropsType, ExternalLinkPropsType } from "./types"
+import Icon from "../icon"
+
+const ExternalLink = ({ animate = true, ...props }: ExternalLinkPropsType) => {
+  const [scale, setScale] = useState(1)
+
+  const setState = (n: number) => {
+    if (animate) {
+      setScale(n)
+    }
+  }
+
+  return (
+    <a
+      className={props.className}
+      onMouseDown={() => setState(0.95)}
+      onMouseUp={() => setState(1)}
+      onTouchStart={() => setState(0.95)}
+      onTouchEnd={() => setState(1)}
+      style={{ transform: `scale(${scale})`, transition: "color 0.2s ease, transform 0.2s ease" }}
+      title={props.title}
+      href={props.to}
+      target={props.target}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </a>
+  )
+}
+
+const Link = (props: LinkPropsType) => {
+  const LinkTag = props.page_slug ? PageLink : ExternalLink
+  let slug = (props.page_slug ? props.page_slug : props.external_link) as string
+  if (props.anchor) {
+    slug = `${slug}#${props.anchor}`
+  }
+  return (
+    <LinkTag
+      className={props.className}
+      to={slug}
+      title={props.title}
+      target={props.target}
+      onClick={props.onClick}
+      animate={props.animate}
+    >
+      {!!props.icon && <Icon icon={props.icon} />}
+      {props.children ? props.children : props.text}
+    </LinkTag>
+  )
+}
+
+export default Link

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

@@ -0,0 +1,24 @@
+import { MouseEventHandler } from "react";
+import { DataAttributeType, LinkType } from "../types";
+
+export interface LinkPropsType extends Omit<LinkType, "type" | "tag" | "data"> {
+  type?: "link";
+  tag?: "a";
+  className?: string;
+  title?: string;
+  anchor?: string;
+  data?: DataAttributeType;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children?: React.ReactNode;
+  animate?: boolean;
+}
+
+export interface ExternalLinkPropsType {
+  className?: string;
+  to: string;
+  target?: string;
+  title?: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  children?: React.ReactNode;
+  animate?: boolean;
+}

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

@@ -0,0 +1,17 @@
+import React from "react"
+import { LinkType } from "../types"
+import { LinkListPropsType } from "./types"
+import Link from "../link"
+
+const LinkList = ({ pk, ...props }: LinkListPropsType) => {
+  return (
+    <ul className={props.className}>
+      {props.links.map((link: LinkType, k: number) => (
+        <li key={`LinkList${pk}-${k}`}>
+          <Link {...link}>{props.children}</Link>
+        </li>
+      ))}
+    </ul>
+  )
+}
+export default LinkList

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

@@ -0,0 +1,6 @@
+import { LinkListType } from "../types";
+
+export interface LinkListPropsType extends LinkListType {
+  className?: string;
+  children?: React.ReactNode;
+}

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react"
+import ReactSelect from "react-select"
+import {
+  GroupedOptionsType,
+  OptionType,
+  OptionsType,
+  SelectPropsType,
+} from "./types"
+
+/**
+ * Transforms the options into the allowed format, which could be either
+ *
+ *  - Normal options:
+ *    [
+ *      {label: "option 1", value: "1"},
+ *      {label: "option 2", value: "2"},
+ *      ...
+ *    ]
+ *
+ *  - Grouped options:
+ *    [
+ *      {label: "Group 1", options: [{label: "option 1", value: "1"}, {label: "option 2", value: "2"}, ..]},
+ *      {label: "Group 2", options: [{label: "option 3", value: "3"}, {label: "option 4", value: "4"}, ..]},
+ *      ...
+ *    ]
+ */
+const formatOptions = (
+  options: OptionsType
+): (OptionType | GroupedOptionsType)[] => {
+  if (Array.isArray(options)) {
+    return options
+  }
+  return typeof options[Object.keys(options)[0]] === "string"
+    ? Object.entries(options).reduce((acc, [value, label]) => {
+        // @ts-ignore
+        acc.push({ label: label, value: value })
+        return acc
+      }, [] as OptionType[])
+    : Object.entries(options).reduce((acc, [label, values]) => {
+        acc.push({
+          label: label,
+          options: Object.entries(values).reduce(
+            (opts, [k, v]) => [...opts, { label: v, value: k }],
+            [] as OptionType[]
+          ),
+        })
+        return acc
+      }, [] as GroupedOptionsType[])
+}
+
+const getValue = (
+  options: (OptionType | GroupedOptionsType)[],
+  value: string
+): any => {
+  for (let option of options) {
+    if (option.hasOwnProperty("options")) {
+      for (let opt of (option as GroupedOptionsType).options) {
+        if (value === opt.value) {
+          return opt
+        }
+      }
+      return option
+    } else if (value === (option as OptionType).value) {
+      return option
+    }
+  }
+  return null
+}
+
+const Select: React.FC<SelectPropsType> = ({
+  value,
+  styles,
+  options,
+  label,
+  ...props
+}) => {
+  const [show, setShow] = useState<boolean>(false)
+  const opts = formatOptions(options) as any
+
+  useEffect(() => setShow(true), [])
+
+  return (
+    show && (
+      <label
+        className={"label-" + (props.className ? props.className : props.name)}
+      >
+        {!!label && <span>{label}</span>}
+        <ReactSelect
+          options={opts}
+          value={typeof value === "string" ? getValue(opts, value) : value}
+          styles={styles}
+          {...props}
+        />
+      </label>
+    )
+  )
+}
+
+export default Select

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

@@ -0,0 +1,24 @@
+import OptionTypeBase, { Props as SelectProps } from "react-select"
+
+export interface OptionType {
+  label: string
+  value: string
+}
+export interface GroupedOptionsType {
+  label: string
+  options: OptionType[]
+}
+
+export type OptionsType =
+  | { [key: string]: string | { [key: string]: string } }
+  | OptionType[]
+  | GroupedOptionsType[]
+export interface SelectPropsType
+  extends Omit<SelectProps<OptionTypeBase>, "value" | "options"> {
+  className?: string
+  name?: string
+  value?: OptionType | string | null
+  options: OptionsType
+  styles?: any
+  label?: string
+}

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

@@ -0,0 +1,8 @@
+import React from "react"
+import { FilePropsType } from "./types"
+
+const SVG = (props: FilePropsType) => {
+  return <img className={props.className} src={props.file.url} />
+}
+
+export default SVG

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { FileMediaType } from "../types";
+
+export interface FilePropsType extends FileMediaType {
+  className?: string;
+  style?: React.CSSProperties;
+  onLoad?: any;
+}

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

@@ -0,0 +1,14 @@
+import React from "react"
+import { TextPropsType } from "./types"
+import Markdown from "../../markdown"
+
+
+const Text = (props: TextPropsType) => {
+  return (
+    <div className={props.className}>
+      <Markdown tagAttrs={props.tagAttrs}>{props.text}</Markdown>
+    </div>
+  )
+}
+
+export default Text

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

@@ -0,0 +1,12 @@
+import { MouseEventHandler } from "react";
+import { DataAttributeType } from "../types";
+import { TagAttributesType } from "../../markdown/types";
+
+export interface TextPropsType {
+  className?: string;
+  text: string;
+  type?: "text";
+  data?: DataAttributeType;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+  tagAttrs?: TagAttributesType;
+}

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

@@ -0,0 +1,12 @@
+import React from "react"
+
+const TextArea = ({ label, ...props }: any) => {
+  return (
+    <label className={`textarea label-${props.name}`}>
+      {!!label && <span>{label}</span>}
+      <textarea {...props} />
+    </label>
+  )
+}
+
+export default TextArea

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

@@ -0,0 +1,19 @@
+import React, { useMemo } from "react"
+import { TitlePropsType } from "./types"
+import Markdown from  "../../markdown"
+
+const Title = (props: TitlePropsType) => {
+  const data = useMemo(() => {
+    return props.title && props.title[0] === "#"
+      ? props.title
+      : `### ${props.title}`
+  }, [props.title])
+
+  return (
+    <Markdown className={props.className} onClick={props.onClick}>
+      {data}
+    </Markdown>
+  )
+}
+
+export default Title

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

@@ -0,0 +1,10 @@
+import { MouseEventHandler } from "react";
+import { DataAttributeType } from "../types";
+
+export interface TitlePropsType {
+  className?: string;
+  title: string;
+  type?: "title";
+  data?: DataAttributeType;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}