ublo-lib 1.0.0 → 1.0.3

package/es/common/components/gesco-contact-form/index.js

@@ -0,0 +1,2 @@
+import GescoContactForm from "./gesco-contact-form";
+export default GescoContactForm;

package/es/common/components/search-bar/hooks/use-constant.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+const useConstant = fn => {
+  const ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+};
+
+export default useConstant;

package/es/common/components/search-bar/hooks/use-debounced-search.js

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import debouncePromise from "awesome-debounce-promise";
+import useConstant from "./use-constant";
+import { useAsync } from "react-async-hook";
+export const useDebouncedSearch = searchFunction => {
+  const [text, setText] = useState("");
+  const debouncedSearchFunction = useConstant(() => debouncePromise(searchFunction, 200));
+  const search = useAsync(async () => text.length === 0 ? undefined : debouncedSearchFunction(text), [debouncedSearchFunction, text], {
+    setLoading: state => ({ ...state,
+      loading: true
+    })
+  });
+  return {
+    text,
+    setText,
+    search
+  };
+};

package/es/common/components/search-bar/hooks/use-search.js

@@ -0,0 +1,3 @@
+import { useDebouncedSearch } from "./use-debounced-search";
+import { fetchResults } from "../utils/fetcher";
+export const useSearch = (ubloApi, site, lang, seo, exclude) => useDebouncedSearch(query => fetchResults(ubloApi, site, lang, query, seo, exclude));

package/es/common/components/search-bar/icons.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const Icon = ({
+  width = 24,
+  height = 24,
+  ...props
+}) => _jsx("svg", {
+  viewBox: `0 0 ${width} ${height}`,
+  width: width,
+  height: height,
+  ...props,
+  children: props.children
+});
+
+export const SearchIcon = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+  })
+});
+export const LoadIcon = props => _jsx(Icon, { ...props,
+  children: _jsx("path", {
+    d: "M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
+  })
+});

package/es/common/components/search-bar/index.js

@@ -0,0 +1,2 @@
+import SearchBar from "./search-bar";
+export default SearchBar;

package/es/common/components/search-bar/messages.js

@@ -0,0 +1,15 @@
+const locales = {
+  fr: {
+    "what-are-you-looking-for": "Que recherchez-vous ?",
+    "no-results": "Pas de résultats..."
+  },
+  en: {
+    "what-are-you-looking-for": "What are you looking for?",
+    "no-results": "No results..."
+  }
+};
+export const message = (lang, id, messages = locales) => {
+  if (!messages || !messages[lang]) return id;
+  const langMessages = messages[lang];
+  return langMessages[id] || `??${id}??`;
+};

package/es/common/components/search-bar/search-bar.js

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { useState, useEffect, useRef } from "react";
+import classnames from "classnames";
+import Link from "ublo/link";
+import { useUbloContext } from "ublo/with-ublo";
+import { SearchIcon, LoadIcon } from "./icons";
+import * as Plausible from "../plausible";
+import { useSearch } from "./hooks/use-search";
+import * as KeyboardKeys from "./utils/keyboard-keys";
+import { message } from "./messages";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const SearchBar = ({
+  resultFormatter,
+  backdrop,
+  OverrideIcons = {},
+  messages,
+  seo,
+  exclude,
+  autofocus
+}) => {
+  const input = useRef();
+  const results = useRef();
+  const [state, setState] = useState({
+    active: 0,
+    selected: undefined
+  });
+  const {
+    lang,
+    config
+  } = useUbloContext();
+  const {
+    ubloApi,
+    site
+  } = config;
+  const {
+    text,
+    setText,
+    search
+  } = useSearch(ubloApi, site, lang, seo, exclude);
+  const DefaultIcons = {
+    SearchIcon,
+    LoadIcon
+  };
+  const Icons = Object.assign(DefaultIcons, OverrideIcons);
+
+  const close = () => setText("");
+
+  const onChange = e => {
+    const userInput = e.currentTarget.value;
+    setText(userInput);
+    setState({
+      active: 0
+    });
+  };
+
+  const onKeyDown = e => {
+    const allowedKeys = ["ArrowUp", "ArrowDown", "Enter", "Escape"];
+    const {
+      code,
+      keyCode,
+      key,
+      which
+    } = e;
+    const isAllowed = allowedKeys.includes(code) || allowedKeys.includes(key);
+    if (!isAllowed) return;
+    const keyId = keyCode ?? which;
+    const up = keyId === KeyboardKeys.ArrowUp;
+    const enter = keyId === KeyboardKeys.Enter;
+    const escape = keyId === KeyboardKeys.Escape;
+
+    if (escape) {
+      close();
+      return;
+    }
+
+    const container = results.current;
+    const firstResult = container?.querySelector(".search-bar__result");
+    const allResults = Array.from(container?.querySelectorAll(".search-bar__result"));
+    const lastResult = allResults[allResults.length - 1];
+    const selectedResult = container?.querySelector(".search-bar__result--selected");
+
+    if (enter && selectedResult) {
+      selectedResult.click();
+      return;
+    }
+
+    let newSelected;
+
+    if (!selectedResult) {
+      newSelected = up ? lastResult : firstResult;
+    } else {
+      newSelected = up ? selectedResult.previousElementSibling || lastResult : selectedResult.nextElementSibling || firstResult;
+    }
+
+    allResults.forEach(result => result.classList.remove("search-bar__result--selected"));
+    newSelected && newSelected.classList.add("search-bar__result--selected");
+    container && newSelected && (container.scrollTop = newSelected.offsetTop - newSelected.clientHeight);
+  };
+
+  const focusInput = () => {
+    input.current.focus();
+  };
+
+  const handleKeyPresses = React.useCallback(e => {
+    const allowedKeys = ["k"];
+    const {
+      code,
+      ctrlKey,
+      key,
+      keyCode,
+      metaKey,
+      which
+    } = e;
+    const isAllowed = !text && (ctrlKey || metaKey) && (allowedKeys.includes(code) || allowedKeys.includes(key));
+    if (!isAllowed) return;
+    e.preventDefault();
+    const keyId = keyCode ?? which;
+
+    if (keyId === KeyboardKeys.K && (ctrlKey || metaKey)) {
+      focusInput();
+    }
+  }, []);
+  useEffect(() => {
+    if (autofocus) focusInput();
+    window.addEventListener("keydown", handleKeyPresses);
+    return () => {
+      window.removeEventListener("keydown", handleKeyPresses);
+    };
+  }, []);
+  const Icon = search?.loading ? Icons.LoadIcon : Icons.SearchIcon;
+  const classes = classnames("search-bar", {
+    "search-bar--opened": search?.result,
+    "search-bar--loading": search?.loading
+  });
+  return _jsxs("div", {
+    className: classes,
+    children: [backdrop && _jsx("div", {
+      className: "search-bar__backdrop",
+      onClick: close
+    }), _jsxs("div", {
+      className: "search-bar__input-container",
+      children: [_jsx("input", {
+        ref: input,
+        type: "text",
+        value: text,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        className: "search-bar__input",
+        placeholder: message(lang, "what-are-you-looking-for", messages)
+      }), _jsx(Icon, {
+        className: "search-bar__icon"
+      }), _jsxs("div", {
+        ref: results,
+        className: "search-bar__results",
+        children: [search.result?.map((result, i) => {
+          const {
+            name,
+            title,
+            page,
+            path
+          } = result;
+          const externalLink = page === undefined;
+          const Tag = externalLink ? "a" : Link;
+          const resultLabel = typeof resultFormatter === "function" ? resultFormatter({
+            lang,
+            result,
+            text
+          }) : title;
+          const anchorProps = {
+            href: path,
+            dangerouslySetInnerHTML: {
+              __html: resultLabel
+            }
+          };
+          const linkProps = {
+            as: path,
+            page,
+            title: resultLabel
+          };
+
+          const sendPlausibleGoal = () => {
+            Plausible.sendGoal("Search", {
+              "Terms - Destination": `${text} - ${path}`
+            });
+          };
+
+          const props = externalLink ? anchorProps : linkProps;
+          const classes = classnames("search-bar__result", {
+            "search-bar__result--active": i === state.active
+          });
+          return _jsx(Tag, {
+            className: classes,
+            ...props,
+            onClick: sendPlausibleGoal
+          }, `${name}-${i}`);
+        }), search.result?.length === 0 && _jsx("div", {
+          className: "search-bar__no-result",
+          children: message(lang, "no-results", messages)
+        })]
+      })]
+    })]
+  });
+};
+
+export default SearchBar;

package/es/common/components/search-bar/utils/fetcher.js

@@ -0,0 +1,14 @@
+import * as Params from "./params";
+export const fetchResults = async (ubloApi, site, lang, query, seo, exclude) => {
+  const seoParam = seo === false ? "false" : undefined;
+  const params = Params.build({
+    site,
+    lang,
+    query,
+    seo: seoParam,
+    exclude
+  });
+  const url = `${ubloApi}/api/search${params}`;
+  const res = await fetch(url);
+  return res.json();
+};

package/es/common/components/search-bar/utils/keyboard-keys.js

@@ -0,0 +1,5 @@
+export const K = 75;
+export const ArrowUp = 38;
+export const ArrowDown = 40;
+export const Enter = 13;
+export const Escape = 27;

package/es/common/components/search-bar/utils/params.js

@@ -0,0 +1,8 @@
+export const build = params => {
+  return Object.keys(params).map((key, i) => {
+    const param = params[key];
+    if (!param) return "";
+    const sign = i === 0 ? "?" : "&";
+    return `${sign}${key}=${param}`;
+  }).join("");
+};

package/es/esf/hooks/use-booking-links.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
-import { loadJS } from "../utils/load-js";
+import { loadJS } from "../../common/utils/load-js";
 import * as Plausible from "../plausible";
 
 const setupConfig = (lang, breadcrumb, cart = [], multipleVillages, hasLangPrefix) => {

package/es/esf/hooks/use-reviews.js

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import { useUbloContext } from "ublo/with-ublo";
-import { loadJS } from "../utils/load-js";
+import { loadJS } from "../../common/utils/load-js";
 
 const useReviews = (lang, resort, containerId = "msem-reviews", preventInit) => {
   const {

package/es/lbm/components/msem-linker/actions.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import * as Icons from "dt-design-system/es/icons";
+import MseMLogo from "./msem-logo";
+import { CONNECTED, EDITING } from "./index";
+import * as UI from "./services/ui";
+import styles from "./actions.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const Actions = ({
+  mode,
+  setMode,
+  renderEditingUi
+}) => {
+  const toggleMode = () => {
+    const sections = Array.from(document.querySelectorAll("section[data-class]"));
+
+    if (mode === CONNECTED) {
+      setMode(EDITING);
+      window.Cms.desactivate();
+      window.Cms.hideInfo();
+      window.Cms.pageUi.removeAttribute("active");
+      window.Cms.pageUi.setAttribute("hidden", "");
+      sections.forEach(renderEditingUi);
+    } else {
+      setMode(CONNECTED);
+      window.Cms.pageUi.removeAttribute("hidden");
+      sections.forEach(section => UI.remove(section));
+    }
+  };
+
+  const onSaveClick = async () => {
+    if (!window.Cms) return;
+    window.Cms.pageUi.removeAttribute("hidden");
+    window.Cms.pageUi.setAttribute("active", "");
+    window.Cms.pageUi.startloading();
+    setMode(CONNECTED);
+    const sections = Array.from(document.querySelectorAll("section[data-class]"));
+    sections.forEach(section => UI.remove(section, true));
+    window.Cms.pageUi.unsavedChanges = false;
+    await window.Cms.save();
+  };
+
+  return _jsxs(_Fragment, {
+    children: [mode === CONNECTED && _jsx("button", {
+      className: `${styles.action} ${styles.toggle}`,
+      onClick: toggleMode,
+      "data-tooltip": "G\xE9rer les widgets",
+      children: _jsx(MseMLogo, {})
+    }), mode === EDITING && _jsxs(_Fragment, {
+      children: [_jsx("button", {
+        className: `${styles.action} ${styles.cancel}`,
+        onClick: toggleMode,
+        children: _jsx(Icons.Cross, {})
+      }), _jsx("button", {
+        className: `${styles.action} ${styles.save}`,
+        onClick: onSaveClick,
+        children: _jsx(Icons.Save, {})
+      })]
+    })]
+  });
+};
+
+export default Actions;

package/es/lbm/components/msem-linker/actions.module.css

@@ -0,0 +1,75 @@
+.action {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Open Sans", sans-serif;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: var(--cms-shadow-100, 0 5px 10px rgba(0, 0, 0, 0.12));
+  cursor: pointer;
+  transition: box-shadow 160ms
+    var(--cms-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+  animation: action-button-appearance 320ms
+    var(--cms-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+@keyframes action-button-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+
+.toggle {
+  bottom: 236px;
+  right: 25px;
+  width: 36px;
+  height: 36px;
+}
+
+.cancel,
+.save {
+  bottom: 16px;
+  width: 56px;
+  height: 56px;
+  fill: #fff;
+}
+
+.cancel {
+  right: 16px;
+  background-color: var(--cms-red-400, #d50000);
+}
+
+.save {
+  right: 86px;
+  background-color: var(--cms-green-400, #4caf50);
+}
+
+.action[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: calc(50% - 12px);
+  right: calc(100% + 4px);
+  padding: 6px 10px;
+  font-size: 11px;
+  line-height: 1;
+  font-family: "Open Sans", sans-serif;
+  color: var(--cms-grey-000, #ffffff);
+  background-color: var(--cms-grey-500, #383838);
+  white-space: nowrap;
+  border-radius: var(--cms-radius-200, 10px);
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 240ms
+    var(--cms-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.action:hover::after {
+  opacity: 1;
+}
+
+.action > svg {
+  width: 24px;
+  height: 24px;
+}