josenanodev-react-components-library 1.0.2 → 1.0.4

package/dist/esm/common/turboSuiteUrls.js

@@ -0,0 +1,7 @@
+let turboSuiteUrls = {
+    testEnviroment: "http://localhost",
+    apiV1Prod: "https://api.turbosuite.es/v1/",
+    apiV1PreProd: "https://api.demo.turbosuite.com/v1/",
+    middleware: window.actionUrl,
+};
+export default turboSuiteUrls;

package/dist/esm/common/types.d.ts

@@ -0,0 +1,113 @@
+import { languageType } from "./assets/languages/types";
+
+export interface customWindow extends Window {
+  access: string;
+  propertyManagerCode: string;
+  propertyManagerLookAndFeelCode: string;
+  languageCode: string;
+  actionUrl: string;
+}
+
+export interface SagaActionParamsType<T> {
+  type: string;
+  payload: T;
+  repeatsLeft: number;
+  persistentReduxAction: string;
+  reduxError: string;
+  showErrorMessage?: boolean;
+  millisecondsWait?: number;
+}
+
+export interface NotificationsReducerStateType {
+  quickNotifications: QuickNotificationsType[];
+}
+
+export interface lookAndFeelType {
+  code: string;
+  logoUrl: string;
+  primaryColor: string;
+  secondaryColor: string;
+  fontFamily: "Roboto" | "Bitter" | "Dosis" | "Figtree" | "Mulish" | "Nunito Sans";
+  enabled: boolean;
+  propertyManagerCode?: string;
+}
+
+export interface AppSettingsReducerStateType {
+  view: "multidestiny";
+  language: languageType;
+  lookAndFeel?: lookAndFeelType;
+}
+
+export interface DestiniesReducerStateType {
+  countries: CountryType[];
+  regions: RegionType[];
+  provinces: ProvinceType[];
+  municipalities: MunicipalityType[];
+  mixedDestinies: DestinyType[];
+}
+
+export interface DatesReducerStateType {
+  draggingOverDateCells: boolean;
+}
+
+export interface QuickNotificationsType {
+  text: string;
+  creation: Date;
+  type: "info" | "error" | "ok";
+}
+
+export interface CountryType {
+  code: string;
+  name: string;
+}
+
+export interface RegionType {
+  code: string;
+  name: string;
+  country: {
+    code: string;
+    name: string;
+  };
+}
+
+export interface ProvinceType {
+  code: string;
+  name: string;
+  country: {
+    code: string;
+    name: string;
+  };
+  region: {
+    code: string;
+    name: string;
+  };
+}
+
+export interface MunicipalityType {
+  code: string;
+  name: string;
+  country: {
+    code: string;
+    name: string;
+  };
+  region: {
+    code: string;
+    name: string;
+  };
+  province: {
+    code: string;
+    name: string;
+  };
+}
+
+export type DestinyType = (CountryType | RegionType | ProvinceType | MunicipalityType) & {
+  type: "country" | "region" | "province" | "municipality";
+};
+
+export type SeasonsType = "high" | "medium high" | "medium" | "medium low" | "low"
+
+export type EventsType = "1" | "2" | "3"
+
+export type HolidaysType = "1" | "2" | "3"
+
+export type OccupationsType = "high" | "medium" | "low"

package/dist/esm/components/BubbleMenu/BubbleMenu.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type BubbleMenuProps = {
+    options: {
+        icon: JSX.Element;
+        text: string;
+        visible: boolean;
+        optionCallback: () => void;
+    }[];
+    language?: "en" | "es";
+};
+declare const BubbleMenu: ({ options, language }: BubbleMenuProps) => React.JSX.Element;
+export default BubbleMenu;

package/dist/esm/components/BubbleMenu/BubbleMenu.js

@@ -0,0 +1,32 @@
+import React, { Fragment, useState } from "react";
+import styles from "./BubbleMenu.module.scss";
+//icons
+import { BsX } from "react-icons/bs";
+import { IoMenu } from "react-icons/io5";
+const BubbleMenuDictionary = {
+    en: {
+        menu: "menu",
+        close: "close",
+    },
+    es: {
+        menu: "menú",
+        close: "cerrar",
+    },
+};
+const BubbleMenu = ({ options, language = "en" }) => {
+    const [showMenu, setShowMenu] = useState(false);
+    return (React.createElement(Fragment, null,
+        React.createElement("button", { className: styles["menu-button"], onClick: () => setShowMenu(!showMenu) },
+            showMenu ? React.createElement(BsX, null) : React.createElement(IoMenu, null),
+            React.createElement("p", null, showMenu
+                ? BubbleMenuDictionary[language]["close"]
+                : BubbleMenuDictionary[language]["menu"])),
+        React.createElement("section", { className: styles["menu-container"], "data-status": showMenu ? "visible" : "hidden", onClick: () => setShowMenu(false) },
+            React.createElement("ul", null, options
+                .filter((option) => option.visible)
+                .map((option, index) => (React.createElement("li", { key: option.text, style: { transitionDelay: `${index * 100}ms` } },
+                React.createElement("button", { onClick: () => setTimeout(option.optionCallback, 300 + options.length * 100) },
+                    option.icon,
+                    option.text))))))));
+};
+export default BubbleMenu;

package/dist/esm/components/BubbleMenu/BubbleMenu.module.scss

@@ -0,0 +1,113 @@
+.menu-container {
+  position: fixed;
+  top: 0px;
+  padding-top: 80px;
+  box-sizing: border-box;
+  width: 100vw;
+  height: 100vh;
+  transition: background-color 300ms ease-in-out;
+  &[data-status="visible"] {
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 1;
+    ul li {
+      opacity: 1;
+      transform: translateX(0px);
+    }
+  }
+  &[data-status="hidden"] {
+    background-color: transparent;
+    z-index: -1;
+    ul li {
+      opacity: 0;
+      transform: translateX(-110px);
+    }
+  }
+  ul {
+    list-style: none;
+    padding-inline-start: 5px;
+    li {
+      transition: all 300ms ease-in-out;
+      button {
+        border-width: 3px;
+        border-style: solid;
+        border-color: #959595;
+        box-shadow: 3px 3px 4px 1px rgba(90, 90, 90, 0.3);
+        color: #959595;
+        background-color: rgba(255, 255, 255, 0.9);
+        -webkit-tap-highlight-color: transparent;
+        user-select: none;
+        cursor: pointer;
+        transition: all 100ms ease-in-out;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100px;
+        height: 100px;
+        margin: 15px 0px;
+        border-radius: 50px;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+        svg {
+          min-width: 40px;
+          min-height: 40px;
+        }
+        &:active {
+          transform: translate(1px, 1px);
+          box-shadow: 1px 1px 2px rgba(90, 90, 90, 0.3);
+        }
+      }
+    }
+  }
+}
+
+.menu-button {
+  position: fixed;
+  z-index: 2;
+  top: 30px;
+  left: 10px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 25px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #959595;
+  box-shadow: 3px 3px 4px 1px rgba(90, 90, 90, 0.3);
+  color: #959595;
+  background-color: rgba(255, 255, 255, 0.9);
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  cursor: pointer;
+  transition: all 100ms ease-in-out;
+  svg {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 100%;
+    height: 34px;
+    color: #0d280b;
+    path {
+      transition: all 0.3s ease-in-out;
+    }
+  }
+  p {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    color: #0d280b;
+    font-size: 10px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+  &:active {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 2px rgba(90, 90, 90, 0.3);
+  }
+}

package/dist/esm/components/CalendarDatePicker/CalendarDatePicker.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export type CalendarDatePickerProps = {
+    mode: "single" | "multiple" | "range" | "booking";
+    onSelectedDatesChange: (dates: Date[]) => void;
+    language?: "es" | "en";
+    customDates?: {
+        color: string;
+        dates: Date[];
+        selectable: boolean;
+        crossed?: boolean;
+        clickSideEffect?: (date: Date) => void;
+    }[];
+    title?: string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    customStyle?: React.CSSProperties;
+};
+declare const CalendarDatePicker: ({ mode, onSelectedDatesChange, language, customDates, title, minimumDate, maximumDate, customStyle, }: CalendarDatePickerProps) => React.JSX.Element;
+export default CalendarDatePicker;

package/dist/esm/components/CalendarDatePicker/CalendarDatePicker.js

@@ -0,0 +1,163 @@
+import React, { useState } from "react";
+import styles from "./CalendarDatePicker.module.scss";
+import { BsFillCalendar3WeekFill } from "react-icons/bs";
+import InputBoxWithConfirmation from "../InputBoxWithConfirmation/InputBoxWithConfirmation";
+import CalendarScrollableSection from "./subcomponents/CalendarScrollableSection";
+const calendarDatePickerDictionary = {
+    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",
+        monday: "monday",
+        tuesday: "tuesday",
+        wednesday: "wednesday",
+        thursday: "thursday",
+        friday: "friday",
+        saturday: "saturday",
+        sunday: "sunday",
+        today: "today",
+    },
+    es: {
+        january: "enero",
+        february: "febrero",
+        march: "marzo",
+        april: "abril",
+        may: "mayo",
+        june: "junio",
+        july: "julio",
+        august: "agosto",
+        september: "septiembre",
+        october: "octubre",
+        november: "noviembre",
+        december: "diciembre",
+        monday: "lunes",
+        tuesday: "martes",
+        wednesday: "miércoles",
+        thursday: "jueves",
+        friday: "viernes",
+        saturday: "sábado",
+        sunday: "domingo",
+        today: "hoy",
+    },
+};
+const getMonthName = (month, language) => {
+    switch (month) {
+        case 0:
+            return calendarDatePickerDictionary[language].january;
+        case 1:
+            return calendarDatePickerDictionary[language].february;
+        case 2:
+            return calendarDatePickerDictionary[language].march;
+        case 3:
+            return calendarDatePickerDictionary[language].april;
+        case 4:
+            return calendarDatePickerDictionary[language].may;
+        case 5:
+            return calendarDatePickerDictionary[language].june;
+        case 6:
+            return calendarDatePickerDictionary[language].july;
+        case 7:
+            return calendarDatePickerDictionary[language].august;
+        case 8:
+            return calendarDatePickerDictionary[language].september;
+        case 9:
+            return calendarDatePickerDictionary[language].october;
+        case 10:
+            return calendarDatePickerDictionary[language].november;
+        case 11:
+            return calendarDatePickerDictionary[language].december;
+        default:
+            return "";
+    }
+};
+const CalendarDatePicker = ({ mode, onSelectedDatesChange = () => { }, language = "en", customDates = [], title, minimumDate = new Date(1970, 0, 1), maximumDate = new Date(new Date().getFullYear() + 100, 1, 1), customStyle, }) => {
+    const [dates, setDates] = useState([]);
+    const [year, setYear] = useState(new Date().getFullYear());
+    const [month, setMonth] = useState(new Date().getMonth());
+    const [reloadKey, setReloadKey] = useState(Math.random());
+    const isDateValidForChange = (date) => {
+        const minimumMonthFirstDate = new Date(minimumDate.getFullYear(), minimumDate.getMonth(), 1);
+        const maximumMonthLastDate = new Date(maximumDate.getFullYear(), maximumDate.getMonth() + 1, 0);
+        const isDateHigherThanMinimumMonthFirstDate = date.valueOf() >= minimumMonthFirstDate.valueOf();
+        const isDateLowerThanMaximumMonthLastDate = date.valueOf() <= maximumMonthLastDate.valueOf();
+        return isDateHigherThanMinimumMonthFirstDate && isDateLowerThanMaximumMonthLastDate;
+    };
+    return (React.createElement("div", { className: styles["calendar-date-picker"], style: customStyle },
+        React.createElement("section", { className: styles["title"] },
+            React.createElement(BsFillCalendar3WeekFill, null),
+            title,
+            React.createElement("button", { className: styles["today-button"], onClick: () => {
+                    const today = new Date();
+                    if (isDateValidForChange(today)) {
+                        setMonth(today.getMonth());
+                        setYear(today.getFullYear());
+                        setReloadKey(Math.random());
+                    }
+                } }, calendarDatePickerDictionary[language]["today"].slice(0, 1).toUpperCase() +
+                calendarDatePickerDictionary[language]["today"].slice(1))),
+        React.createElement("section", { className: styles["month-and-year"] },
+            React.createElement("select", { style: { fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily }, className: styles["month-input"], value: month, onChange: (event) => {
+                    const numericValue = Number(event.target.value);
+                    setMonth(numericValue);
+                    setReloadKey(Math.random());
+                } }, Array(12)
+                .fill(0)
+                .map((_, index) => {
+                const referenceDate = new Date(year, index, 1);
+                const isDisabled = !isDateValidForChange(referenceDate);
+                return (React.createElement("option", { key: getMonthName(index, language), value: index, disabled: isDisabled }, getMonthName(index, language)));
+            })),
+            React.createElement(InputBoxWithConfirmation, { inputType: "number", divWrapperCustomStyle: {
+                    width: "4ch",
+                    border: "none",
+                    backgroundColor: "transparent",
+                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
+                }, inputBoxCustomStyle: {
+                    padding: 0,
+                    fontFamily: customStyle === null || customStyle === void 0 ? void 0 : customStyle.fontFamily,
+                }, maxLength: 4, defaultValue: year.toString(), overrideCurrentValue: year.toString(), minimumValue: minimumDate.getFullYear().toString(), maximumValue: maximumDate.getFullYear().toString(), onConfirmAction: (inputCurrentValue) => {
+                    let numericValue = Number(inputCurrentValue);
+                    const referenceDate = new Date(numericValue, month, 1);
+                    if (!isDateValidForChange(referenceDate)) {
+                        if (referenceDate.valueOf() < minimumDate.valueOf()) {
+                            setYear(minimumDate.getFullYear());
+                            setMonth(minimumDate.getMonth());
+                            setReloadKey(Math.random());
+                        }
+                        else if (referenceDate.valueOf() > maximumDate.valueOf()) {
+                            setYear(maximumDate.getFullYear());
+                            setMonth(maximumDate.getMonth());
+                            setReloadKey(Math.random());
+                        }
+                    }
+                    else {
+                        setYear(numericValue);
+                        setReloadKey(Math.random());
+                    }
+                } })),
+        React.createElement("section", { className: styles["week-days"] },
+            React.createElement("p", null, calendarDatePickerDictionary[language].monday.slice(0, 1).toUpperCase()),
+            React.createElement("p", null, calendarDatePickerDictionary[language].tuesday.slice(0, 1).toUpperCase()),
+            React.createElement("p", null, calendarDatePickerDictionary[language].wednesday.slice(0, 1).toUpperCase()),
+            React.createElement("p", null, calendarDatePickerDictionary[language].thursday.slice(0, 1).toUpperCase()),
+            React.createElement("p", null, calendarDatePickerDictionary[language].friday.slice(0, 1).toUpperCase()),
+            React.createElement("p", null, calendarDatePickerDictionary[language].saturday.slice(0, 1).toUpperCase()),
+            React.createElement("p", null, calendarDatePickerDictionary[language].sunday.slice(0, 1).toUpperCase())),
+        React.createElement(CalendarScrollableSection, { key: reloadKey, dates: dates, year: year, month: month, mode: mode, onSelectedDatesChange: (selectedDates) => {
+                onSelectedDatesChange(selectedDates);
+                setDates(selectedDates);
+            }, onFocusedMonth: (month, year) => {
+                setMonth(month);
+                setYear(year);
+            }, customDates: customDates, minimumDate: minimumDate, maximumDate: maximumDate })));
+};
+export default CalendarDatePicker;

package/dist/esm/components/CalendarDatePicker/CalendarDatePicker.module.scss

@@ -0,0 +1,104 @@
+@property --angle {
+  sintax: "<angle>";
+  inherits: false;
+  initial-value: 270deg;
+}
+
+@property --color-default {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: white;
+}
+
+@property --color-selected {
+  sintax: "<color>";
+  inherits: false;
+  initial-value: #e3f3e3;
+}
+
+@property --percentage-default {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --percentage-selected {
+  sintax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
+.calendar-date-picker {
+  font-family: Arial, Helvetica, sans-serif;
+  width: 390px;
+  color: #959595;
+  font-weight: 600;
+  font-style: normal;
+  line-height: normal;
+  .title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    font-size: 16px;
+    svg {
+      margin: 0px 5px;
+    }
+  }
+  .today-button {
+    position: absolute;
+    top: 0px;
+    right: 5px;
+    border: solid 2px #787878;
+    border-radius: 6px;
+    padding: 4px 8px;
+    background-color: white;
+    color: #787878;
+    transition: all 0.1s ease-in-out;
+    cursor: pointer;
+    &:hover {
+      background-color: #f3f3f3;
+    }
+    &:active {
+      background-color: #cfcfcf;
+    }
+  }
+  .month-and-year {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    text-align: center;
+    font-size: 22px;
+    padding: 10px 0px;
+    .month-input {
+      width: fit-content;
+      background-color: transparent;
+      border: transparent;
+      text-align: right;
+      font-size: 18px;
+      color: #959595;
+      cursor: pointer;
+      &:focus {
+        outline: transparent;
+      }
+      option {
+        background-color: white;
+        color: #959595;
+        &:disabled {
+          color: #cfcfcf;
+        }
+      }
+    }
+  }
+  .week-days {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ebebeb;
+    p {
+      width: calc(100% / 7);
+      margin: 0px;
+      text-align: center;
+    }
+  }
+}

package/dist/esm/components/CalendarDatePicker/subcomponents/CalendarScrollableSection.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { CalendarDatePickerProps } from "../CalendarDatePicker";
+type CalendarScrollableSectionProps = {
+    dates: Date[];
+    month: number;
+    year: number;
+    mode: CalendarDatePickerProps["mode"];
+    onSelectedDatesChange: CalendarDatePickerProps["onSelectedDatesChange"];
+    onFocusedMonth: (month: number, year: number) => void;
+    customDates: CalendarDatePickerProps["customDates"];
+    minimumDate?: CalendarDatePickerProps["minimumDate"];
+    maximumDate?: CalendarDatePickerProps["maximumDate"];
+};
+declare const CalendarScrollableSection: ({ dates, month, year, mode, onSelectedDatesChange, onFocusedMonth, customDates, minimumDate, maximumDate, }: CalendarScrollableSectionProps) => React.JSX.Element;
+export default CalendarScrollableSection;