willba-component-library 0.3.26 → 0.4.0

package/src/components/FilterCalendar/components/Footer.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { useMediaQuery } from 'react-responsive'
-import { DateRange } from 'react-day-picker'
-
-import { Palette } from '../../../themes/useTheme'
-import { nightsCount, parseDate } from '../../../core/components/calendar/utils'
-import { IconsSvg } from '../../../assets/IconsSvg'
-import { SubmitButton } from '../../../core/components'
-
-export const Footer = ({
-  calendarHasError,
-  calendarRange,
-  handleClearDates,
-  language,
-  palette,
-}: {
-  calendarHasError: boolean
-  calendarRange?: DateRange
-  handleClearDates: () => void
-  language?: string
-  palette: Palette
-}) => {
-  const { t } = useTranslation()
-  const isMobile = useMediaQuery({ maxWidth: 600 })
-
-  const nights = nightsCount({
-    calendarRange: calendarRange,
-  })
-
-  return (
-    <div className="will-calendar-footer-actions-wrapper">
-      <div className="will-calendar-footer-dates">
-        {calendarHasError ? (
-          <div className="will-calendar-footer-error">
-            {calendarHasError &&
-              renderCalendarErrorMessage({
-                palette,
-                message: t(
-                  `common:errors.calendarErrors.checkInAvailabilityError`
-                ),
-              })}
-          </div>
-        ) : (
-          <div>
-            <span>
-              {parseDate({
-                date: calendarRange?.from,
-                dateFormat: 'EEEEEE d.M.yyyy',
-                language,
-              }) || t('common:checkIn')}
-            </span>
-            <span className="will-calendar-footer-dates-separator">-</span>
-            <span>
-              {parseDate({
-                date: calendarRange?.to,
-                dateFormat: 'EEEEEE d.M.yyyy',
-                language,
-              }) || t('common:checkOut')}
-            </span>
-          </div>
-        )}
-
-        <span className="will-calendar-footer-booked">
-          {!calendarHasError && nights
-            ? `${nights} ${t(`common:${nights === 1 ? 'night' : 'nights'}`)}`
-            : ''}
-        </span>
-      </div>
-
-      <div className="will-calendar-footer-actions">
-        <SubmitButton
-          onClick={handleClearDates}
-          disabled={!calendarRange?.from}
-          label={t(`common:clearDates`)}
-          variant="text"
-        />
-      </div>
-    </div>
-  )
-}
-
-/////////
-
-const renderCalendarErrorMessage = ({
-  message,
-  palette,
-}: {
-  message?: string
-  palette: Palette
-}) => (
-  <>
-    <IconsSvg fill={palette?.error || 'inherit'} size={25} icon="warning" />
-    <span>{message || ''}</span>
-  </>
-)

package/src/components/FilterCalendar/hooks/useFilterCalendar.ts

@@ -1,163 +0,0 @@
-import { useEffect, useState } from 'react'
-import { DateRange, Matcher } from 'react-day-picker'
-import { compareAsc, endOfDay, format, isAfter, parseISO } from 'date-fns'
-import {
-  DisableCalendarDates,
-  RangeContext,
-} from 'src/core/components/calendar/CalendarTypes'
-
-type Props = {
-  onSubmit: (val: any) => void
-  setToggleCalendar: (val: boolean) => void
-  noActiveSelection?: boolean
-  toggleCalendar?: boolean
-  outerRangeContext?: RangeContext
-  outerDisableCalendarDates?: DisableCalendarDates
-}
-
-export const useFilterCalendar = ({
-  onSubmit,
-  setToggleCalendar,
-  noActiveSelection,
-  toggleCalendar,
-  outerRangeContext,
-  outerDisableCalendarDates,
-}: Props) => {
-  // State
-  const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
-  const [rangeContext, setRangeContext] = useState<RangeContext | undefined>(
-    outerRangeContext
-  )
-  const [initialCalendarRange, setInitialCalendarRange] = useState<
-    DateRange | undefined
-  >()
-  const [disabledDates, setDisabledDates] = useState<Matcher[]>([])
-  const [updateCalendarMonthNavigation, setUpdateCalendarMonthNavigation] =
-    useState<boolean>(false)
-  const [updateCalendarDefaultMonth, setUpdateCalendarDefaultMonth] =
-    useState<number>(0)
-
-  const [calendarHasError, setCalendarHasError] = useState<boolean>(false)
-
-  const [updatedForSubmit, setUpdatedForSubmit] = useState<boolean>(false)
-  const [disableCalendarDates, setDisableCalendarDates] =
-    useState<DisableCalendarDates>()
-
-  // Lifecycle
-
-  // Handle update component with new data
-  useEffect(() => {
-    if (outerDisableCalendarDates?.availableDates) {
-      setDisableCalendarDates({
-        availableDates: [
-          ...outerDisableCalendarDates.availableDates.sort((a, b) =>
-            compareAsc(a.checkIn, b.checkIn)
-          ),
-        ],
-        disabledDates: outerDisableCalendarDates.disabledDates
-          ? [
-              ...outerDisableCalendarDates.disabledDates.sort((a, b) =>
-                compareAsc(a.from, b.from)
-              ),
-            ]
-          : [],
-      })
-    }
-
-    if (disabledDates && !!outerDisableCalendarDates?.disabledDates?.length) {
-      setDisabledDates({
-        ...disabledDates,
-        ...outerDisableCalendarDates.disabledDates,
-      })
-    }
-  }, [outerDisableCalendarDates])
-
-  // Handle Range Context initial selections
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    const urlSearchParams = new URLSearchParams(window.location.search)
-
-    const startDateParam = urlSearchParams.get('startDate')
-    const endDateParam = urlSearchParams.get('endDate')
-
-    if (startDateParam && endDateParam) {
-      if (noActiveSelection) {
-        handleClearDates()
-        setUpdateCalendarDefaultMonth((prev) => prev + 1)
-        setUpdatedForSubmit(false)
-        setRangeContext(outerRangeContext)
-        setInitialCalendarRange({
-          from: new Date(startDateParam),
-          to: new Date(endDateParam),
-        })
-        setCalendarRange({
-          from: new Date(startDateParam),
-          to: new Date(endDateParam),
-        })
-      } else {
-        setCalendarRange({
-          from: new Date(startDateParam),
-          to: new Date(endDateParam),
-        })
-      }
-    }
-  }, [toggleCalendar])
-
-  // Handle submit dates
-  useEffect(() => {
-    const formatString = 'dd.MM.yyyy'
-    const initialRangeTo = initialCalendarRange?.to
-      ? format(initialCalendarRange.to, formatString)
-      : null
-    const initialRangeFrom = initialCalendarRange?.from
-      ? format(initialCalendarRange.from, formatString)
-      : null
-    const calendarRangeTo = calendarRange?.to
-      ? format(calendarRange.to, formatString)
-      : null
-    const calendarRangeFrom = calendarRange?.from
-      ? format(calendarRange.from, formatString)
-      : null
-
-    if (!!(calendarRangeTo && calendarRangeFrom && updatedForSubmit)) {
-      if (
-        !!(calendarRangeTo !== initialRangeTo) ||
-        !!(calendarRangeFrom !== initialRangeFrom)
-      ) {
-        handleSubmit()
-      } else {
-        setToggleCalendar(false)
-      }
-    }
-  }, [calendarRange])
-
-  // Methods
-  const handleSubmit = () => {
-    setToggleCalendar(false)
-    return onSubmit(calendarRange)
-  }
-
-  const handleClearDates = () => {
-    setDisabledDates([])
-    setCalendarRange(undefined)
-    setCalendarHasError(false)
-    setInitialCalendarRange(undefined)
-  }
-
-  return {
-    handleSubmit,
-    handleClearDates,
-    setCalendarRange,
-    setUpdateCalendarMonthNavigation,
-    calendarRange,
-    disabledDates,
-    updateCalendarMonthNavigation,
-    updateCalendarDefaultMonth,
-    calendarHasError,
-    setCalendarHasError,
-    setUpdatedForSubmit,
-    rangeContext,
-    disableCalendarDates,
-  }
-}

package/src/components/FilterCalendar/index.ts

@@ -1,3 +0,0 @@
-export { default } from './FilterCalendar'
-
-export * from './FilterCalendarTypes'

package/src/core/components/buttons/CloseButton/CloseButton.css

@@ -1,33 +0,0 @@
-.will-filter-bar-close-button {
-  width: auto;
-  height: auto;
-  /* background-color: var(--will-grey); */
-  color: var(--will-grey);
-  padding: 2px 7px;
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-  display: flex;
-  align-items: center;
-  font-size: 23px;
-  /* display: none; */
-
-  position: absolute;
-  top: 10px;
-  right: 10px;
-
-  min-height: 35px;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-close-button {
-    top: 10px;
-    right: 10px;
-
-    border-radius: 25px;
-    margin-left:0;
-   
-    display: flex;
-    justify-content: center;
-  }
-}

package/src/core/components/buttons/CloseButton/CloseButton.tsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { IoIosCloseCircleOutline } from 'react-icons/io'
-
-import './CloseButton.css'
-
-interface CloseButtonPropsType {
-  handleClose: () => void
-}
-
-export const CloseButton = ({ handleClose }: CloseButtonPropsType) => {
-  return (
-    <button className="will-filter-bar-close-button" onClick={handleClose}>
-      <IoIosCloseCircleOutline />
-    </button>
-  )
-}

package/src/core/components/buttons/SubmitButton/SubmitButton.css

@@ -1,54 +0,0 @@
-.will-filter-bar-submit-button {
-  width: auto;
-  height: auto;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  border: none;
-  white-space: nowrap;
-  text-transform: uppercase;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  user-select: none;
-}
-
-/* Submit button variants */
-.will-filter-bar-submit-button.default {
-  background-color: var(--will-primary);
-  color: var(--will-white);
-}
-
-.will-filter-bar-submit-button.text {
-  background-color: transparent;
-  color: var(--will-black);
-  text-decoration: underline;
-  font-weight: 500;
-  font-size: 15px;
-  padding: 0 10px;
-}
-
-.will-filter-bar-submit-button span {
- margin-right: 10px;
- display: flex;
-}
-
-button.will-filter-bar-submit-button:disabled  {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-
-@media (max-width: 960px) {
-  .will-filter-bar-submit-button {
-    justify-content: center;
-   
-  }
-}
-
-/* --- */
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}

package/src/core/components/buttons/SubmitButton/SubmitButton.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { FaSpinner } from 'react-icons/fa'
-import { ReactNode } from 'react'
-
-import './SubmitButton.css'
-
-type SubmitButtonVariant = 'text' | 'full'
-
-type Props = {
-  onClick?: () => void
-  startIcon?: ReactNode
-  label?: string
-  disabled?: boolean
-  isLoading?: boolean
-  variant?: SubmitButtonVariant
-}
-
-export const SubmitButton = ({
-  onClick,
-  startIcon,
-  label,
-  disabled,
-  isLoading,
-  variant,
-}: Props) => {
-  return (
-    <button
-      className={`will-filter-bar-submit-button ${variant || 'default'}`}
-      onClick={onClick}
-      disabled={disabled || isLoading}
-    >
-      {isLoading ? (
-        <span>
-          {<FaSpinner style={{ animation: 'spin 1s linear infinite' }} />}
-        </span>
-      ) : (
-        startIcon && <span>{startIcon}</span>
-      )}
-      {label || 'Label'}
-    </button>
-  )
-}

package/src/core/components/calendar/Calendar.css

@@ -1,280 +0,0 @@
-.will-calendar-filter-container {
-  display: flex;
-  justify-content: center;
-  user-select: none;
-}
-
-/* Calendar overrides */
-.will-calendar-filter-container .rdp {
-  margin: 0;
-}
-
-.will-calendar-filter-container .DayPicker {
-  font-size: 25px;
-}
-
-.will-calendar-filter-container .rdp-month {
-  position: relative;
-}
-
-.will-calendar-filter-container .rdp-month.rdp-caption_start {
-  padding-left: 70px;
-}
-
-.will-calendar-filter-container .rdp-month.rdp-caption_end {
-  padding-right: 70px;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-nav {
-  border: 1px solid var(--will-primary);
-  border-radius: 50%;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-nav svg {
-  color: var(--will-primary);
-}
-
-.will-calendar-filter-container .rdp-month .rdp-caption {
-  position: initial;
-}
-
-.will-calendar-filter-container .rdp-month .rdp-caption > .rdp-caption_label,
-.will-calendar-filter-container .rdp-table .rdp-head {
-  opacity: 0.6;
-}
-
-.will-calendar-filter-container .rdp-table {
-  border-collapse: separate;
-  border-spacing: 0px 2px;
-}
-
-.will-calendar-filter-container
-  .rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
-  background-color: var(--will-primary);
-  opacity: 1;
-  color: var(--will-white);
-}
-
-.will-calendar-filter-container .my-today:not(.rdp-day_selected) {
-  font-weight: 700;
-  opacity: 1;
-  color: var(--will-primary);
-}
-
-.will-calendar-filter-container .rdp-cell {
-  position: relative;
-}
-
-.will-calendar-filter-container .rdp-cell button {
-  font-weight: 500;
-}
-
-.will-calendar-filter-container .rdp-cell button.booked {
-  font-weight: 400;
-  cursor: not-allowed;
-}
-
-.will-calendar-filter-container .rdp-cell .rdp-button[disabled] {
-  color: var(--will-transparent-black);
-  opacity: 1;
-}
-
-@media (max-width: 960px) {
-  .will-calendar-filter-container .rdp-month .rdp-nav {
-    border: none;
-    border-radius: initial;
-  }
-
-  .will-calendar-filter-container .rdp-month.rdp-caption_start {
-    padding-left: 10px;
-  }
-
-  .will-calendar-filter-container .rdp-month.rdp-caption_end {
-    padding-right: 10px;
-  }
-}
-
-/* Tooltips */
-.will-root .will-calendar-filter-container .will-calendar-tooltip,
-.will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-overlapping-date,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-out-only,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-in-only {
-  position: absolute;
-  top: -42px;
-  transform: translateX(calc(-50% + 20px));
-  display: none;
-  white-space: nowrap;
-  z-index: 2;
-}
-
-.will-root .will-calendar-filter-container .will-calendar-tooltip > div,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-out
-  > div,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-overlapping-date
-  > div,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-out-only
-  > div,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-in-only
-  > div {
-  background-color: white;
-  position: relative;
-  padding: 5px 10px;
-  border: 1px solid var(--will-primary);
-  border-radius: 5px;
-}
-
-.will-root .will-calendar-filter-container .will-calendar-tooltip::before,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-out::before,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-overlapping-date::before,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-out-only::before,
-.will-root
-  .will-calendar-filter-container
-  .will-calendar-tooltip-check-in-only::before {
-  content: '';
-  width: 10px;
-  height: 10px;
-  border: 1px solid var(--will-primary);
-  position: absolute;
-  bottom: -4px;
-  left: calc(50% - 5.555px);
-  rotate: 45deg;
-  z-index: 0;
-  background-color: var(--will-white);
-}
-
-.will-root
-  .will-calendar-filter-container
-  .rdp-cell:hover
-  .will-calendar-tooltip,
-.will-root
-  .will-calendar-filter-container
-  .rdp-cell:hover
-  .will-calendar-tooltip-check-out,
-.will-root
-  .will-calendar-filter-container
-  .rdp-cell:hover
-  .will-calendar-tooltip-overlapping-date,
-.will-root
-  .will-calendar-filter-container
-  .rdp-cell:hover
-  .will-calendar-tooltip-check-out-only,
-.will-root
-  .will-calendar-filter-container
-  .rdp-cell:hover
-  .will-calendar-tooltip-check-in-only {
-  display: block;
-}
-
-/* Loading spinner */
-
-.will-root .will-calendar-filter-container .rdp-months {
-  position: relative;
-}
-
-.will-root .will-calendar-filter-container .will-calendar-spinner {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--will-white-transparent);
-  z-index: 3;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  font-weight: 600;
-}
-
-/* No active selection */
-
-.will-root .will-calendar-filter-container .no-active-selection-start,
-.will-root .will-calendar-filter-container .no-active-selection-mid,
-.will-root .will-calendar-filter-container .no-active-selection-end {
-  position: initial;
-}
-
-.will-root .will-calendar-filter-container .no-active-selection-start::before,
-.will-root .will-calendar-filter-container .no-active-selection-mid::before,
-.will-root .will-calendar-filter-container .no-active-selection-end::before {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border: 2px solid var(--will-light-grey);
-  box-sizing: border-box;
-}
-
-.will-root .will-calendar-filter-container .no-active-selection-start::before {
-  border-right: none;
-  border-top-left-radius: 50%;
-  border-bottom-left-radius: 50%;
-}
-
-.will-root .will-calendar-filter-container .no-active-selection-mid::before {
-  border-right: none;
-  border-left: none;
-}
-
-.will-root .will-calendar-filter-container .no-active-selection-end::before {
-  border-left: none;
-  border-top-right-radius: 50%;
-  border-bottom-right-radius: 50%;
-}
-
-.will-root
-  .will-calendar-filter-container
-  .rdp-day_selected.rdp-day_range_middle.checkout-option {
-  background-color: var(--will-primary-lightest);
-  color: inherit;
-}
-
-/* Overlapping date */
-
-.will-root .will-calendar-filter-container .overlapping-date {
-  user-select: none;
-  pointer-events: none;
-}
-
-.will-root .will-calendar-filter-container .overlapping-date:hover {
-  cursor: not-allowed;
-}
-
-@media (max-width: 600px) {
-  /* Tooltips */
-  .will-root .will-calendar-filter-container .will-calendar-tooltip,
-  .will-root .will-calendar-filter-container .will-calendar-tooltip-check-out,
-  .will-root
-    .will-calendar-filter-container
-    .will-calendar-tooltip-overlapping-date,
-  .will-root
-    .will-calendar-filter-container
-    .will-calendar-tooltip-check-out-only,
-  .will-root
-    .will-calendar-filter-container
-    .will-calendar-tooltip-check-in-only {
-    top: -70px;
-    white-space: wrap;
-    max-width: 120px;
-  }
-}