ublo-lib 1.13.4 → 1.14.0

package/es/common/components/editable-calendar/calendar-caption.js

@@ -0,0 +1,150 @@
+import * as React from "react";
+import { useUbloContext } from "ublo/with-ublo";
+import Input from "dt-design-system/es/input";
+import css from "./calendar-caption.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultColors = ["#234d5c", "#5F2EEA", "#0038FF", "#4ec3df", "#24C678", "#FFB648", "#F26464", "#FF005C", "#7C7B7B", "#222222"];
+export default function CalendarCaption({
+  presets,
+  setPresets
+}) {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const initialColors = presets.colors ? Object.keys(presets.colors).map(key => presets.colors[key].backgroundColor) : defaultColors;
+  const [colors, setColors] = React.useState(initialColors);
+  const initialTextColors = presets.colors ? Object.keys(presets.colors).map(key => presets.colors[key].textColor) : [...new Array(colors.length)].fill("#ffffff");
+  const [textColors, setTextColors] = React.useState(initialTextColors);
+  const initialValues = presets.colors ? Object.keys(presets.colors).map(color => presets.colors[color].text) : [...new Array(colors.length)].fill("");
+  const [values, setValues] = React.useState(initialValues);
+  const isEditing = cmsMode === "editing";
+  React.useEffect(() => {
+    if (isEditing) {
+      const newPresets = {
+        colors: colors.reduce((acc, color, index) => {
+          return {
+            ...acc,
+            [index]: {
+              text: values[index],
+              backgroundColor: color,
+              textColor: textColors[index]
+            }
+          };
+        }, {})
+      };
+      setPresets(currentPresets => {
+        return {
+          ...currentPresets,
+          ...newPresets
+        };
+      });
+    }
+  }, [colors, isEditing, setPresets, textColors, values]);
+  return isEditing ? _jsx(Editor, {
+    colors: colors,
+    setColors: setColors,
+    values: values,
+    setValues: setValues,
+    textColors: textColors,
+    setTextColors: setTextColors
+  }) : _jsx(Caption, {
+    colors: colors,
+    values: values,
+    textColors: textColors
+  });
+}
+function Editor({
+  colors,
+  setColors,
+  values,
+  setValues,
+  textColors,
+  setTextColors
+}) {
+  return _jsxs("div", {
+    className: css.root,
+    children: [colors.map((color, index) => {
+      const updateValue = value => {
+        setValues(prev => {
+          const newValues = [...prev];
+          newValues[index] = value;
+          return newValues;
+        });
+      };
+      const updateColor = e => {
+        const color = e.target.value;
+        setColors(prev => {
+          const newColors = [...prev];
+          newColors[index] = color;
+          return newColors;
+        });
+      };
+      const updateTextColor = e => {
+        const color = e.target.value;
+        setTextColors(prev => {
+          const newTextColors = [...prev];
+          newTextColors[index] = color;
+          return newTextColors;
+        });
+      };
+      return _jsxs("div", {
+        className: css.row,
+        children: [_jsx(Input, {
+          className: css.color,
+          style: {
+            color: textColors[index],
+            backgroundColor: color
+          },
+          placeholder: "Horaires",
+          onValueChange: updateValue,
+          value: values[index],
+          compact: true
+        }), _jsx("input", {
+          className: css.colorPicker,
+          type: "color",
+          value: color,
+          onChange: updateColor
+        }), _jsx("input", {
+          className: css.textColorPicker,
+          type: "color",
+          value: textColors[index],
+          onChange: updateTextColor,
+          list: "textColors"
+        }), _jsx("span", {
+          className: css.textPickerLabel,
+          children: "A"
+        })]
+      }, `${color}-${index}`);
+    }), _jsxs("datalist", {
+      id: "textColors",
+      children: [_jsx("option", {
+        children: "#000000"
+      }), _jsx("option", {
+        children: "#ffffff"
+      })]
+    })]
+  });
+}
+function Caption({
+  colors,
+  values,
+  textColors
+}) {
+  return _jsx("div", {
+    className: css.root,
+    children: colors.map((color, index) => {
+      return _jsx("div", {
+        className: css.row,
+        children: _jsx("div", {
+          className: css.color,
+          style: {
+            color: textColors[index],
+            backgroundColor: color
+          },
+          children: values[index]
+        })
+      }, `${color}-${index}`);
+    })
+  });
+}

package/es/common/components/editable-calendar/calendar-caption.module.css

@@ -0,0 +1,76 @@
+.root {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.color {
+  width: 140px;
+  height: 30px;
+}
+
+.color input::placeholder {
+  color: inherit;
+}
+
+div.color {
+  flex: 1 1 100%;
+  width: auto;
+  min-width: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 3px 8px;
+  text-align: center;
+  border-radius: var(--ds-radius-100, 4px);
+}
+
+div.color:empty {
+  display: none;
+}
+
+.color:has(input:focus) {
+  z-index: 2;
+}
+
+.colorPicker,
+.textColorPicker {
+  flex: 0 0 30px;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: var(--ds-radius-100, 4px);
+}
+
+.textColorPicker {
+  flex: 0 0 60px;
+  width: 60px;
+  appearance: none;
+}
+
+.colorPicker:focus {
+  z-index: 3;
+}
+
+.textPickerLabel {
+  position: absolute;
+  top: 6px;
+  right: 33px;
+  font-family: "Times New Roman", Times, serif;
+  font-size: 14px;
+  font-weight: 700;
+  color: rgb(255, 255, 255);
+  mix-blend-mode: difference;
+  pointer-events: none;
+}

package/es/common/components/editable-calendar/calendar-date.js

@@ -0,0 +1,84 @@
+import * as React from "react";
+import classnames from "classnames";
+import { useUbloContext } from "ublo/with-ublo";
+import * as Ripple from "dt-design-system/es/ripple";
+import * as Utils from "./utils";
+import css from "./calendar-date.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default React.memo(CalendarDate);
+function CalendarDate({
+  date,
+  month,
+  year,
+  minDate,
+  presets,
+  selecting,
+  setSelecting,
+  hoveredDates,
+  setHoveredDates
+}) {
+  const {
+    cmsMode
+  } = useUbloContext();
+  const {
+    colors,
+    dates = {}
+  } = presets;
+  const isEditing = cmsMode === "editing";
+  const dateString = date.join("-");
+  const _date = new Date(dateString);
+  _date.setHours(0, 0, 0, 0);
+  const datesKeys = Object.keys(dates);
+  const isInPresets = datesKeys.includes(dateString);
+  const dateStyles = isInPresets ? {
+    color: colors[dates[dateString]].textColor,
+    backgroundColor: colors[dates[dateString]].backgroundColor
+  } : undefined;
+  const dateTooltip = isInPresets && !isEditing ? colors[dates[dateString]].text : undefined;
+  const isToday = Utils.isSameDay(_date);
+  const inMonth = month && year && Utils.isSameMonth(_date, new Date([Utils.zeroPad(year, 2), Utils.zeroPad(month, 2), "01"].join("-")));
+  const isDisabled = minDate && _date < minDate;
+  const createRipple = e => {
+    Ripple.create(e);
+  };
+  const startSelecting = e => {
+    if (isDisabled) return;
+    createRipple(e);
+    if (!isEditing) return;
+    setSelecting(true);
+    setHoveredDates([_date]);
+  };
+  const stopSelecting = () => {
+    if (!isEditing) return;
+    setSelecting(false);
+  };
+  const computeSelection = () => {
+    if (isDisabled || !isEditing || !selecting) return;
+    let startDate = hoveredDates[0];
+    const endDate = _date;
+    const isBefore = startDate.getTime() > endDate.getTime();
+    if (isBefore) {
+      startDate = hoveredDates[hoveredDates.length - 1];
+    }
+    const dates = Utils.getDateInterval(startDate, endDate, isBefore);
+    setHoveredDates(dates);
+  };
+  const classes = classnames(css.date, {
+    [css.dateToday]: isToday,
+    [css.dateNotInMonth]: !inMonth,
+    [css.dateDisabled]: isDisabled,
+    [css.dateHovered]: !!hoveredDates.find(item => {
+      return item.getTime() === _date.getTime();
+    })
+  });
+  return _jsx("button", {
+    className: classes,
+    tabIndex: isDisabled ? -1 : 0,
+    onMouseDown: startSelecting,
+    onMouseEnter: computeSelection,
+    onMouseUp: stopSelecting,
+    style: dateStyles,
+    "data-tooltip": dateTooltip,
+    children: _date.getDate()
+  });
+}

package/es/common/components/editable-calendar/calendar-date.module.css

@@ -0,0 +1,52 @@
+.date {
+  position: relative;
+  width: 100%;
+  margin: 0;
+  padding: 8px 6px;
+  box-sizing: border-box;
+  font-size: 14px;
+  text-align: center;
+  color: var(--ds-grey-700, #262626);
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--ds-radius-200, 8px);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    background-color 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),
+    border-radius 160ms
+      var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}
+
+.date:focus-visible {
+  outline: var(--ds-focus-ring-width, 2px) solid
+    var(--ds-focus-ring-color, var(--ds-blue-400, #0038ff));
+  outline-offset: var(--ds-focus-ring-offset, 2px);
+}
+
+.dateToday {
+  font-weight: 700;
+}
+
+.dateHovered {
+  color: var(--ds-white, #fff) !important;
+  background-color: var(--ds-secondary, var(--ds-blue-400, #0038ff)) !important;
+}
+
+.dateDisabled,
+.dateDisabled.dateNotInMonth {
+  opacity: 0.25;
+  transform: translateZ(0);
+  cursor: not-allowed;
+}
+
+.dateNotInMonth {
+  opacity: 0.5;
+}
+
+.date:not(.dateDisabled, .dateHovered):hover {
+  background-color: var(--ds-grey-200, #ededed);
+}

package/es/common/components/editable-calendar/calendar-editor.js

@@ -0,0 +1,89 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import css from "./calendar-editor.module.css";
+import * as Utils from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function CalendarEditor({
+  presets,
+  setPresets,
+  hoveredDates,
+  closeEditor
+}) {
+  const {
+    colors,
+    dates = {}
+  } = presets;
+  const formatedHoveredDates = hoveredDates.map(date => {
+    return Utils.formatDate(date);
+  });
+  const updateDates = colorIndex => () => {
+    const newDates = formatedHoveredDates.reduce((acc, date) => {
+      if (!colorIndex) return acc;
+      return {
+        ...acc,
+        [date]: colorIndex
+      };
+    }, {});
+    const newPresets = {
+      dates: {
+        ...dates,
+        ...newDates
+      }
+    };
+    if (!colorIndex) {
+      for (const date of formatedHoveredDates) {
+        delete newPresets.dates[date];
+      }
+    }
+    Object.keys(dates).forEach(key => {
+      const now = new Date();
+      const date = new Date(key);
+      if (date < now) {
+        delete newPresets.dates[key];
+      }
+    });
+    setPresets(currentPresets => {
+      return {
+        ...currentPresets,
+        ...newPresets
+      };
+    });
+    closeEditor();
+  };
+  return _jsxs("div", {
+    className: css.editor,
+    children: [_jsx(Button, {
+      variant: "transparent",
+      className: css.close,
+      onClick: closeEditor,
+      children: _jsx(Icons.Cross, {})
+    }), _jsxs("div", {
+      className: css.inner,
+      children: [_jsx(Button, {
+        variant: "transparent",
+        className: css.cleanup,
+        onClick: updateDates(),
+        children: "Aucun"
+      }), Object.keys(colors).map(key => {
+        const {
+          text,
+          backgroundColor,
+          textColor
+        } = colors[key];
+        if (!text) return null;
+        return _jsx(Button, {
+          variant: "secondary",
+          className: css.color,
+          style: {
+            color: textColor,
+            backgroundColor
+          },
+          onClick: updateDates(key),
+          children: text
+        }, key);
+      })]
+    })]
+  });
+}

package/es/common/components/editable-calendar/calendar-editor.module.css

@@ -0,0 +1,38 @@
+.editor {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(var(--ds-blur, 8px));
+  padding: 20px;
+  border-radius: inherit;
+  z-index: 2;
+}
+
+.close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  color: var(--ds-grey-000, #ffffff);
+}
+
+.inner {
+  width: 380px;
+  max-width: 100%;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 16px;
+  background-color: var(--ds-grey-000, #ffffff);
+  border-radius: inherit;
+}
+
+.color {
+  flex: 1 1 auto;
+}

package/es/common/components/editable-calendar/calendar-header.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Button from "dt-design-system/es/button";
+import * as Icons from "dt-design-system/es/icons";
+import css from "./calendar-header.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Header({
+  goToPreviousMonth,
+  goToNextMonth,
+  monthName,
+  year,
+  pastMonthDisabled
+}) {
+  return _jsxs("div", {
+    className: css.header,
+    children: [_jsx(Button, {
+      className: css.control,
+      onClick: goToPreviousMonth,
+      disabled: !!pastMonthDisabled,
+      children: _jsx(Icons.ChevronLeft, {})
+    }), _jsxs("div", {
+      className: css.title,
+      children: [monthName, " ", year]
+    }), _jsx(Button, {
+      className: css.control,
+      onClick: goToNextMonth,
+      children: _jsx(Icons.ChevronRight, {})
+    })]
+  });
+}

package/es/common/components/editable-calendar/calendar-header.module.css

@@ -0,0 +1,20 @@
+.header {
+  display: flex;
+  align-items: center;
+}
+
+button.control {
+  color: var(--ds-grey-600, #484848);
+  background-color: transparent;
+}
+
+.title {
+  margin: 0 auto;
+  color: var(--ds-grey-600, #484848);
+  font-weight: 700;
+  background-color: transparent;
+}
+
+button.control:not(:disabled):hover {
+  background-color: var(--ds-grey-100, #f8f8f8);
+}

package/es/common/components/editable-calendar/calendar.js

@@ -0,0 +1,127 @@
+import * as React from "react";
+import classnames from "classnames";
+import Header from "./calendar-header";
+import CalendarDate from "./calendar-date";
+import CalendarEditor from "./calendar-editor";
+import CalendarCaption from "./calendar-caption";
+import * as Data from "./data";
+import * as Utils from "./utils";
+import css from "./calendar.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default React.forwardRef(Calendar);
+function Calendar({
+  lang = "fr",
+  format,
+  className
+}, ref) {
+  const locale = lang || (typeof navigator !== "undefined" && navigator.language) === "fr" ? "fr" : "en";
+  const [presets, setPresets] = React.useState(format.presets);
+  React.useEffect(() => {
+    format.element.dataset.presets = JSON.stringify(presets);
+  }, [format, presets]);
+  const now = new Date();
+  const minDate = now;
+  if (minDate) minDate.setHours(0, 0, 0, 0);
+  const defaultMonth = Date.THIS_MONTH;
+  const currentMonth = getMonthFromPresets(presets?.dates);
+  const currentYear = Data.THIS_YEAR;
+  const [month, setMonth] = React.useState(currentMonth);
+  const [year, setYear] = React.useState(currentYear);
+  const [selecting, setSelecting] = React.useState(false);
+  const [hoveredDates, setHoveredDates] = React.useState([]);
+  const showAssociationEditor = !selecting && hoveredDates.length > 0;
+  const closeEditor = () => {
+    setSelecting(false);
+    setHoveredDates([]);
+  };
+  const resetSelection = () => {
+    if (!selecting) return;
+    setSelecting(false);
+    setHoveredDates([]);
+  };
+  const pastMonthDisabled = minDate && month <= minDate.getMonth() + 1 && year <= minDate.getFullYear() || minDate && month <= defaultMonth && year <= currentYear;
+  const i18nMonths = Data.MONTHS[locale];
+  const monthName = i18nMonths[Object.keys(i18nMonths)[month - 1]];
+  const i18nWeekDays = Data.WEEK_DAYS[locale];
+  const days = Object.keys(i18nWeekDays);
+  const calendarDates = Data.calendar(month, year);
+  const goToPreviousMonth = () => {
+    const {
+      month: newMonth,
+      year: newYear
+    } = Utils.getPreviousMonth(month, year);
+    setMonth(newMonth);
+    setYear(newYear);
+  };
+  const goToNextMonth = () => {
+    const {
+      month: newMonth,
+      year: newYear
+    } = Utils.getNextMonth(month, year);
+    setMonth(newMonth);
+    setYear(newYear);
+  };
+  const classes = classnames(css.root, className);
+  return _jsx("div", {
+    ref: ref,
+    className: classes,
+    "data-cms-remove": "",
+    children: _jsxs("div", {
+      className: css.outer,
+      children: [_jsxs("div", {
+        className: css.calendar,
+        children: [_jsxs("div", {
+          className: css.inner,
+          children: [_jsx(Header, {
+            goToPreviousMonth: goToPreviousMonth,
+            goToNextMonth: goToNextMonth,
+            monthName: monthName,
+            year: year,
+            pastMonthDisabled: pastMonthDisabled
+          }), _jsx("div", {
+            className: css.days,
+            children: days.map((day, i) => _jsx("div", {
+              className: css.day,
+              children: i18nWeekDays[day]
+            }, `${day}-${i}`))
+          }), _jsx("div", {
+            className: css.dates,
+            onMouseLeave: resetSelection,
+            children: calendarDates.map((date, i) => _jsx(CalendarDate, {
+              date: date,
+              month: month,
+              year: year,
+              minDate: minDate,
+              presets: presets,
+              setPresets: setPresets,
+              selecting: selecting,
+              setSelecting: setSelecting,
+              hoveredDates: hoveredDates,
+              setHoveredDates: setHoveredDates
+            }, i))
+          })]
+        }), showAssociationEditor && _jsx(CalendarEditor, {
+          presets: presets,
+          setPresets: setPresets,
+          hoveredDates: hoveredDates,
+          closeEditor: closeEditor
+        })]
+      }), _jsx(CalendarCaption, {
+        presets: presets,
+        setPresets: setPresets
+      })]
+    })
+  });
+}
+function getMonthFromPresets(dates = {}) {
+  const keys = Object.keys(dates);
+  if (keys.length === 0) return Data.THIS_MONTH;
+  const sortedKeys = keys.sort((a, b) => {
+    const dateA = new Date(a);
+    const dateB = new Date(b);
+    return dateA.getTime() - dateB.getTime();
+  });
+  const firstDate = new Date(sortedKeys[0]);
+  return firstDate.getMonth() + 1;
+}

package/es/common/components/editable-calendar/calendar.module.css

@@ -0,0 +1,80 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.outer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+:global(body:not(.cms--editing) [data-caption-position="haut"]) .outer {
+  flex-direction: column;
+}
+
+:global(body:not(.cms--editing) [data-caption-position="haut"]) .outer {
+  flex-direction: column-reverse;
+}
+
+:global(body:not(.cms--editing) [data-caption-position="gauche"]) .outer {
+  flex-direction: row-reverse;
+}
+
+.calendar {
+  width: min-content;
+  padding: 6px;
+  box-sizing: border-box;
+  font-family: var(--ds-sans-serif-font, Montserrat, sans-serif);
+  background-color: var(--ds-grey-000, #fff);
+  border: 1px solid var(--ds-grey-100, #ebebeb);
+  border-radius: var(--ds-date-picker-radius, var(--ds-radius-200, 8px));
+}
+
+@media (min-width: 350px) {
+  .calendar {
+    padding: 14px;
+  }
+}
+
+.inner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dates,
+.days {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(36px, 1fr));
+  gap: 3px;
+}
+
+@media (min-width: 350px) {
+  .dates,
+  .days {
+    grid-template-columns: repeat(7, minmax(40px, 1fr));
+  }
+}
+
+.days {
+  height: 34px;
+  align-items: center;
+  margin-bottom: 3px;
+  background-color: var(--ds-grey-100, #f8f8f8);
+  border-radius: var(--ds-radius-200, 8px);
+}
+
+.day {
+  color: var(--ds-grey-500, #7c7b7b);
+  font-size: 15px;
+  text-align: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  transition: color 160ms
+    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
+}

package/es/common/components/editable-calendar/data.js

@@ -0,0 +1,112 @@
+import * as Utils from "./utils";
+export const THIS_YEAR = new Date().getFullYear();
+export const THIS_MONTH = new Date().getMonth() + 1;
+export const MONTHS = {
+  fr: {
+    january: "Janvier",
+    february: "Février",
+    march: "Mars",
+    april: "Avril",
+    may: "Mai",
+    june: "Juin",
+    july: "Juillet",
+    august: "Aout",
+    september: "Septembre",
+    october: "Octobre",
+    november: "Novembre",
+    december: "Décembre"
+  },
+  en: {
+    january: "January",
+    february: "February",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  }
+};
+export const SHORT_MONTHS = {
+  fr: {
+    january: "Jan",
+    february: "Fév",
+    march: "Mar",
+    april: "Avr",
+    may: "Mai",
+    june: "Juin",
+    july: "Juil",
+    august: "Aou",
+    september: "Sept",
+    october: "Oct",
+    november: "Nov",
+    december: "Déc"
+  },
+  en: {
+    january: "Jan",
+    february: "Feb",
+    march: "Mar",
+    april: "Apr",
+    may: "May",
+    june: "Jun",
+    july: "Jul",
+    august: "Aug",
+    september: "Sept",
+    october: "Oct",
+    november: "Nov",
+    december: "Dec"
+  }
+};
+export const WEEK_DAYS = {
+  fr: {
+    monday: "L",
+    tuesday: "M",
+    wednesday: "M",
+    thursday: "J",
+    friday: "V",
+    saturday: "S",
+    sunday: "D"
+  },
+  en: {
+    monday: "M",
+    tuesday: "T",
+    wednesday: "W",
+    thursday: "T",
+    friday: "F",
+    saturday: "S",
+    sunday: "S"
+  }
+};
+export const CALENDAR_WEEKS = 6;
+export function calendar(month = THIS_MONTH, year = THIS_YEAR) {
+  const monthDays = Utils.getMonthDays(month, year);
+  const monthFirstDay = Utils.getMonthFirstDay(month, year);
+  const daysFromPrevMonth = monthFirstDay === 0 ? 6 : monthFirstDay - 1;
+  const daysFromNextMonth = CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
+  const {
+    month: prevMonth,
+    year: prevMonthYear
+  } = Utils.getPreviousMonth(month, year);
+  const {
+    month: nextMonth,
+    year: nextMonthYear
+  } = Utils.getNextMonth(month, year);
+  const prevMonthDays = Utils.getMonthDays(prevMonth, prevMonthYear);
+  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((_, i) => {
+    const day = i + 1 + (prevMonthDays - daysFromPrevMonth);
+    return [prevMonthYear, Utils.zeroPad(prevMonth, 2), Utils.zeroPad(day, 2)];
+  });
+  const thisMonthDates = [...new Array(monthDays)].map((_, i) => {
+    const day = i + 1;
+    return [year, Utils.zeroPad(month, 2), Utils.zeroPad(day, 2)];
+  });
+  const nextMonthDates = [...new Array(daysFromNextMonth)].map((_, i) => {
+    const day = i + 1;
+    return [nextMonthYear, Utils.zeroPad(nextMonth, 2), Utils.zeroPad(day, 2)];
+  });
+  return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];
+}

package/es/common/components/editable-calendar/index.js

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import dynamic from "next/dynamic";
+import { useUbloContext } from "ublo/with-ublo";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Calendar = dynamic(() => import("./calendar"), {
+  ssr: false
+});
+export default function EditableCalendar() {
+  const {
+    lang,
+    path
+  } = useUbloContext();
+  const [formats, setFormats] = React.useState([]);
+  const refreshFormats = React.useCallback(() => {
+    setFormats([]);
+    const elements = document.querySelectorAll("section.editable-calendar");
+    if (elements.length) {
+      const formats = Array.from(elements).map(element => {
+        const storedPresets = element.dataset.presets;
+        const presets = storedPresets ? JSON.parse(storedPresets) : {};
+        return {
+          element,
+          presets
+        };
+      });
+      setFormats(formats);
+    }
+  }, []);
+  React.useEffect(() => {
+    refreshFormats();
+  }, [lang, path, refreshFormats]);
+  React.useEffect(() => {
+    const zones = Array.from(document.querySelectorAll(".cms"));
+    zones.forEach(zone => {
+      zone.addEventListener("ublo-section-created", refreshFormats);
+      zone.addEventListener("ublo-section-pasted", refreshFormats);
+    });
+    window.addEventListener("ublo-content-saved", reloadWindow);
+    return () => {
+      window.addEventListener("ublo-content-saved", reloadWindow);
+      zones.forEach(zone => {
+        zone.removeEventListener("ublo-section-created", refreshFormats);
+        zone.removeEventListener("ublo-section-pasted", refreshFormats);
+      });
+    };
+  }, [refreshFormats]);
+  if (!formats.length) return null;
+  return formats.map(format => ReactDOM.createPortal(_jsx(Calendar, {
+    lang: lang,
+    format: format
+  }), format.element));
+}
+function reloadWindow() {
+  window.location.reload();
+}

package/es/common/components/editable-calendar/utils.js

@@ -0,0 +1,76 @@
+import * as Data from "./data";
+export function zeroPad(value, length) {
+  return `${value}`.padStart(length, "0");
+}
+export function formatDate(date) {
+  const d = new Date(date);
+  const day = zeroPad(d.getDate(), 2);
+  const month = zeroPad(d.getMonth() + 1, 2);
+  const year = d.getFullYear();
+  return `${year}-${month}-${day}`;
+}
+export function getYearsRange(start, end) {
+  return Array(end - start + 1).fill(undefined).map((_, i) => start + i);
+}
+export function getMonthDays(month = Data.THIS_MONTH, year = Data.THIS_YEAR) {
+  const months30 = [4, 6, 9, 11];
+  const leapYear = year % 4 === 0;
+  return month === 2 ? leapYear ? 29 : 28 : months30.includes(month) ? 30 : 31;
+}
+export function getMonthFirstDay(month = Data.THIS_MONTH, year = Data.THIS_YEAR) {
+  return new Date(`${year}-${zeroPad(month, 2)}-01`).getDay();
+}
+export function isDate(date) {
+  const isDate = Object.prototype.toString.call(date) === "[object Date]";
+  const isValidDate = date && !Number.isNaN(date.valueOf());
+  return isDate && isValidDate;
+}
+export function isSameMonth(date, basedate = new Date()) {
+  if (!(isDate(date) && isDate(basedate))) return false;
+  const basedateMonth = basedate.getMonth() + 1;
+  const basedateYear = basedate.getFullYear();
+  const dateMonth = date.getMonth() + 1;
+  const dateYear = date.getFullYear();
+  return basedateMonth === dateMonth && basedateYear === dateYear;
+}
+export function isSameDay(date, basedate = new Date()) {
+  if (!(isDate(date) && isDate(basedate))) return false;
+  const basedateDate = basedate.getDate();
+  const basedateMonth = basedate.getMonth() + 1;
+  const basedateYear = basedate.getFullYear();
+  const dateDate = date.getDate();
+  const dateMonth = date.getMonth() + 1;
+  const dateYear = date.getFullYear();
+  return basedateDate === dateDate && basedateMonth === dateMonth && basedateYear === dateYear;
+}
+export function getPreviousMonth(month, year) {
+  const prevMonth = month > 1 ? month - 1 : 12;
+  const prevMonthYear = month > 1 ? year : year - 1;
+  return {
+    month: prevMonth,
+    year: prevMonthYear
+  };
+}
+export function getNextMonth(month, year) {
+  const nextMonth = month < 12 ? month + 1 : 1;
+  const nextMonthYear = month < 12 ? year : year + 1;
+  return {
+    month: nextMonth,
+    year: nextMonthYear
+  };
+}
+export function addDays(_date, days) {
+  const date = new Date(_date);
+  date.setDate(date.getDate() + days);
+  return date;
+}
+export function getDateInterval(startDate, endDate, reverse) {
+  const dates = [];
+  let currentDate = reverse ? endDate : startDate;
+  const stopDate = reverse ? startDate : endDate;
+  while (currentDate <= stopDate) {
+    dates.push(currentDate);
+    currentDate = addDays(currentDate, 1);
+  }
+  return dates;
+}

package/es/common/components/editable-map/edit-form.js

@@ -94,11 +94,11 @@ export default function EditForm({
         onClick: removeMarker,
         compact: true,
         children: [_jsx(Icons.Bin, {}), "Supprimer ce point"]
-      }), _jsx(Button, {
+      }), _jsxs(Button, {
         variant: "success",
         onClick: closeMarker,
         compact: true,
-        children: _jsx(Icons.Check, {})
+        children: ["Valider", _jsx(Icons.Check, {})]
       })]
     })]
   });

package/es/esf/components/loyal-customers/components/field.js

@@ -73,7 +73,7 @@ const renderField = (lang, label, classes, name, field, data, setData) => {
       newData[name].validator = isValid;
     }
   };
-  const formatedOptions = [{
+  const formatedOptions = type === "select" ? [{
     label: Messages.get(lang, "select"),
     value: ""
   }].concat(optionsToDisplay.map(option => {
@@ -81,7 +81,7 @@ const renderField = (lang, label, classes, name, field, data, setData) => {
       label: option.label?.[lang],
       value: option.value ?? option.label?.[lang]
     };
-  }));
+  })) : undefined;
   return _jsx(Tag, {
     onValueChange: onChange,
     options: formatedOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.13.4",
+  "version": "1.14.0",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "leaflet": "^1.9.1",