willba-component-library 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.css

@@ -1,5 +1,5 @@
 .will-root {
-  z-index: 99999;
+  z-index: 999;
   width: 100%;
   max-height: 100vh;
   position: relative;
@@ -10,22 +10,6 @@
   position: relative;
 }
 
-.will-filter-bar-underlay {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right:0;
-  cursor: pointer;
-  z-index: 88888;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-underlay {
-   height: 500vh;
-  }
-}
-
 /* Tabs */
 
 .will-filter-bar-tabs {
@@ -85,10 +69,5 @@
     padding: 30px 20px;
     position: relative;
   }
-
-  .will-root.isMobileAbsolute {
-    position: relative;
-    z-index: 99999;
-  }
 }
 

package/src/components/FilterBar/FilterBar.tsx

@@ -1,25 +1,32 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { format } from 'date-fns'
 
-import Divider from './components/divider/Divider'
-import SelectButton from './components/buttons/select-button/SelectButton'
-import SubmitButton from './components/buttons/submit-button/SubmitButton'
-import Calendar from './components/calendar/Calendar'
-import Guests from './components/guests/Guests'
-import Categories from './components/categories/Categories'
-
 import useTheme, { Palette } from '../../themes/useTheme'
-import useFilterBar from './hooks/useFilterBar'
-
-import './FilterBar.css'
 import '../../themes/Default.css'
-import i18n from '../../i18n'
-import CloseButton from './components/buttons/close-button/CloseButton'
-import TabButton from './components/buttons/tab-button/TabButton'
+
+import { parseDates, parseGuests } from './utils'
 import { AgeCategoryType } from './FilterBarTypes'
+import {
+  useCloseFilterSection,
+  useFilterBar,
+  useScrollInToView,
+  useUpdateTranslations,
+} from './hooks'
+import {
+  TabButton,
+  SelectButton,
+  SubmitButton,
+  CloseButton,
+  Calendar,
+  Guests,
+  Divider,
+  Categories,
+} from './components'
+
+import './FilterBar.css'
 
-export interface FilterBarProps {
+export type FilterBarProps = {
   vendor?: string
   language?: string
   ageCategories?: AgeCategoryType[]
@@ -38,15 +45,7 @@ export default function FilterBar({
   const themePalette = useTheme({ palette })
 
   // Translations
-  const [rerenderKey, setRerenderKey] = useState(0)
-  const [isMobile, setIsMobile] = useState(true)
-
-  useEffect(() => {
-    i18n.changeLanguage(language)
-
-    setRerenderKey((prevKey) => prevKey + 1)
-  }, [language])
-
+  useUpdateTranslations({ language })
   const { t } = useTranslation('filterBar')
 
   // Filters
@@ -64,152 +63,108 @@ export default function FilterBar({
     setSelectedPath,
   } = useFilterBar({ redirectUrl, currentViewApply })
 
-  // Scroll in to view
-
-  const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
+  // Default selected tab
   useEffect(() => {
     if (currentViewApply === 'roomFilters') {
       setSelectedPath('/rooms')
     }
+  }, [])
 
-    if (window !== undefined && window.innerWidth > 960) {
-      setIsMobile(false)
-      return
-    }
+  // Scroll in to view
+  const { isMobile, targetFilterBarRef } = useScrollInToView({ selectedFilter })
 
-    if (targetFilterBarRef.current && selectedFilter) {
-      window.scrollTo({
-        behavior: 'smooth',
-        top:
-          targetFilterBarRef.current.getBoundingClientRect().top -
-          document.body.getBoundingClientRect().top -
-          30,
-      })
-    }
-  }, [selectedFilter])
-
-  const renderDates =
-    calendarRange?.to && calendarRange?.from
-      ? `${format(calendarRange.from, 'dd.MM.yyyy')} -
-    ${format(calendarRange.to, 'dd.MM.yyyy')}`
-      : null
-
-  const renderGuests = Object.entries(ageCategoryCounts).reduce(
-    (acc, [key, value]) => {
-      const ageCategory = ageCategories.find(
-        (c) => c.id === key[key.length - 1]
-      )
-
-      if (ageCategory && value) {
-        acc += `${acc ? ' -' : ''} ${ageCategory.name}: ${value}`
-      }
-
-      return acc
-    },
-    ''
-  )
+  // Handle close filter section
+  const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
+
+  const parsedDates = parseDates({ calendarRange })
+  const parsedGuests = parseGuests({ ageCategoryCounts, ageCategories })
 
   return (
-    <>
-      {selectedFilter && (
+    <div className={`will-root`} style={themePalette}>
+      {!currentViewApply && (
         <div
-          className={`will-filter-bar will-filter-bar-underlay`}
-          onClick={() => {
-            handleSelectedFilter(false)
-          }}
-        />
+          className="will-filter-bar-tabs"
+          ref={!currentViewApply ? targetFilterBarRef : null}
+        >
+          <TabButton
+            label={t('tabs.events')}
+            onClick={() => setSelectedPath('/events')}
+            active={selectedPath === '/events'}
+          />
+          <TabButton
+            label={t('tabs.rooms')}
+            onClick={() => setSelectedPath('/rooms')}
+            active={selectedPath === '/rooms'}
+          />
+        </div>
       )}
 
       <div
-        className={`will-root ${selectedFilter ? 'isMobileAbsolute' : ''}`}
-        style={themePalette}
+        className="will-filter-bar-header"
+        ref={currentViewApply ? targetFilterBarRef : null}
       >
-        {!currentViewApply && (
-          <div
-            className="will-filter-bar-tabs"
-            ref={!currentViewApply ? targetFilterBarRef : null}
-          >
-            <TabButton
-              label={t('tabs.events')}
-              onClick={() => setSelectedPath('/events')}
-              active={selectedPath === '/events'}
-            />
-            <TabButton
-              label={t('tabs.rooms')}
-              onClick={() => setSelectedPath('/rooms')}
-              active={selectedPath === '/rooms'}
+        <SelectButton
+          label={t('calendar.label')}
+          description={
+            parsedDates
+              ? parsedDates
+              : selectedPath === '/rooms'
+              ? t('calendar.roomsLabelPlaceholder')
+              : t('calendar.eventsLabelPlaceholder')
+          }
+          onClick={() => handleSelectedFilter(1)}
+          style={fontWeightBold(selectedFilter === 1)}
+          date={
+            calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
+          }
+        />
+
+        {selectedPath === '/rooms' && (
+          <>
+            <Divider />
+
+            <SelectButton
+              label={t('guests.label')}
+              description={
+                parsedGuests ? parsedGuests : t('guests.labelPlaceholder')
+              }
+              onClick={() => handleSelectedFilter(2)}
+              style={fontWeightBold(selectedFilter === 2)}
             />
-          </div>
+          </>
         )}
 
+        <SubmitButton onClick={handleSubmit} />
+      </div>
+
+      {selectedFilter && (
         <div
-          className="will-filter-bar-header"
-          ref={currentViewApply ? targetFilterBarRef : null}
+          className="will-filter-bar-container"
+          style={currentViewApply && !isMobile ? { top: 66 } : {}}
         >
-          <SelectButton
-            label={t('calendar.label')}
-            description={
-              renderDates
-                ? renderDates
-                : selectedPath === '/rooms'
-                ? t('calendar.roomsLabelPlaceholder')
-                : t('calendar.eventsLabelPlaceholder')
-            }
-            onClick={() => handleSelectedFilter(1)}
-            style={fontWeightBold(selectedFilter === 1)}
-            date={
-              calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
-            }
-          />
+          <CloseButton handleClose={() => handleSelectedFilter(false)} />
 
-          {selectedPath === '/rooms' && (
-            <>
-              <Divider />
-
-              <SelectButton
-                label={t('guests.label')}
-                description={
-                  renderGuests ? renderGuests : t('guests.labelPlaceholder')
-                }
-                onClick={() => handleSelectedFilter(2)}
-                style={fontWeightBold(selectedFilter === 2)}
-              />
-            </>
+          {selectedFilter === 1 && (
+            <Calendar
+              calendarRange={calendarRange}
+              setCalendarRange={setCalendarRange}
+              ref={filtersRef}
+            />
+          )}
+          {selectedFilter === 2 && (
+            <Guests
+              updateGuestsCount={updateGuestsCount}
+              ageCategories={ageCategories}
+              ageCategoryCounts={ageCategoryCounts}
+              ref={filtersRef}
+            />
+          )}
+          {selectedFilter === 3 && (
+            <Categories categories={categories} setCategories={setCategories} />
           )}
-
-          <SubmitButton onClick={handleSubmit} />
         </div>
-
-        {selectedFilter && (
-          <div
-            className="will-filter-bar-container"
-            style={currentViewApply && !isMobile ? { top: 66 } : {}}
-          >
-            <CloseButton handleClose={() => handleSelectedFilter(false)} />
-
-            {selectedFilter === 1 && (
-              <Calendar
-                calendarRange={calendarRange}
-                setCalendarRange={setCalendarRange}
-              />
-            )}
-            {selectedFilter === 2 && (
-              <Guests
-                updateGuestsCount={updateGuestsCount}
-                ageCategories={ageCategories}
-                ageCategoryCounts={ageCategoryCounts}
-              />
-            )}
-            {selectedFilter === 3 && (
-              <Categories
-                categories={categories}
-                setCategories={setCategories}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </>
+      )}
+    </div>
   )
 }
 

package/src/components/FilterBar/FilterBarTypes.ts

@@ -9,12 +9,6 @@ export interface AgeCategoryType {
   sortOrder: number
 }
 
-export interface GuestsPropsType {
-  ageCategories: AgeCategoryType[]
-  updateGuestsCount: (arg1: string, arg2: number) => void
-  ageCategoryCounts: AgeCategoryCount | {}
-}
-
 export interface GuestsCountPropsType {
   label: string
   id: number

package/src/components/FilterBar/components/buttons/close-button/CloseButton.tsx

@@ -7,7 +7,7 @@ interface CloseButtonPropsType {
   handleClose: () => void
 }
 
-export default function CloseButton({ handleClose }: CloseButtonPropsType) {
+export const CloseButton = ({ handleClose }: CloseButtonPropsType) => {
   return (
     <button className="will-filter-bar-close-button" onClick={handleClose}>
       <IoIosCloseCircleOutline />

package/src/components/FilterBar/components/buttons/index.ts

@@ -0,0 +1,4 @@
+export { CloseButton } from './close-button/CloseButton'
+export { SelectButton } from './select-button/SelectButton'
+export { SubmitButton } from './submit-button/SubmitButton'
+export { TabButton } from './tab-button/TabButton'

package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx

@@ -9,12 +9,7 @@ type Props = {
   description: string
 }
 
-export default function SelectButton({
-  label,
-  onClick,
-  style,
-  description,
-}: any) {
+export const SelectButton = ({ label, onClick, style, description }: any) => {
   return (
     <button
       className="will-filter-bar-select-button"

package/src/components/FilterBar/components/buttons/submit-button/SubmitButton.tsx

@@ -4,7 +4,7 @@ import { FaSearch } from 'react-icons/fa'
 
 import './SubmitButton.css'
 
-export default function SubmitButton({ onClick }: any) {
+export const SubmitButton = ({ onClick }: any) => {
   const { t } = useTranslation('filterBar')
 
   return (

package/src/components/FilterBar/components/buttons/tab-button/TabButton.tsx

@@ -8,7 +8,7 @@ type Props = {
   active?: boolean
 }
 
-export default function SubmitButton({ onClick, label, active }: Props) {
+export const TabButton = ({ onClick, label, active }: Props) => {
   return (
     <button
       className={`will-filter-bar-tab-button ${active && 'active'}`}

package/src/components/FilterBar/components/calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React, { forwardRef, useEffect } from 'react'
 import { DateRange, DayPicker } from 'react-day-picker'
 import { addDays, startOfDay, addMonths } from 'date-fns'
 import { useMediaQuery } from 'react-responsive'
@@ -6,56 +6,55 @@ import { useMediaQuery } from 'react-responsive'
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
 
-interface CalendarPropsType {
+type Props = {
   calendarRange: DateRange | undefined
   setCalendarRange: (range: DateRange | undefined) => void
 }
 
-export default function Calendar({
-  calendarRange,
-  setCalendarRange,
-}: CalendarPropsType) {
-  const isTablet = useMediaQuery({ maxWidth: 960 })
+export const Calendar = forwardRef<HTMLDivElement, Props>(
+  ({ calendarRange, setCalendarRange }: Props, ref) => {
+    const isTablet = useMediaQuery({ maxWidth: 960 })
 
-  const today = startOfDay(new Date())
+    const today = startOfDay(new Date())
 
-  const disabledDays = [
-    {
-      from: addDays(today, -2),
-      to: addDays(today, -50),
-    },
-  ]
+    const disabledDays = [
+      {
+        from: addDays(today, -2),
+        to: addDays(today, -50),
+      },
+    ]
 
-  useEffect(() => {
-    if (!calendarRange) setCalendarRange(undefined)
-  }, [])
+    useEffect(() => {
+      if (!calendarRange) setCalendarRange(undefined)
+    }, [])
 
-  return (
-    <div className="will-filter-bar-calendar">
-      {/* <div className="will-calendar-filter-header">
+    return (
+      <div className="will-filter-bar-calendar" ref={ref}>
+        {/* <div className="will-calendar-filter-header">
         <h3 className="will-calendar-filter-title">{t('calendar.title')}</h3>
       </div> */}
-      <div className="will-calendar-filter-container">
-        <DayPicker
-          id="will-calendar"
-          mode="range"
-          showOutsideDays
-          numberOfMonths={!isTablet ? 2 : 1}
-          weekStartsOn={1}
-          selected={calendarRange}
-          onSelect={setCalendarRange}
-          modifiersClassNames={{
-            today: 'my-today',
-          }}
-          modifiersStyles={{
-            disabled: { opacity: '0.2' },
-          }}
-          captionLayout="dropdown-buttons"
-          defaultMonth={today}
-          disabled={disabledDays}
-          fromMonth={today}
-        />
+        <div className="will-calendar-filter-container">
+          <DayPicker
+            id="will-calendar"
+            mode="range"
+            showOutsideDays
+            numberOfMonths={!isTablet ? 2 : 1}
+            weekStartsOn={1}
+            selected={calendarRange}
+            onSelect={setCalendarRange}
+            modifiersClassNames={{
+              today: 'my-today',
+            }}
+            modifiersStyles={{
+              disabled: { opacity: '0.2' },
+            }}
+            captionLayout="dropdown-buttons"
+            defaultMonth={today}
+            disabled={disabledDays}
+            fromMonth={today}
+          />
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)

package/src/components/FilterBar/components/categories/Categories.tsx

@@ -3,7 +3,12 @@ import { useTranslation } from 'react-i18next'
 
 import './Categories.css'
 
-export default function Categories({ categories, setCategories }: any) {
+type Props = {
+  categories: any
+  setCategories: any
+}
+
+export const Categories = ({ categories, setCategories }: Props) => {
   const { t } = useTranslation('filterBar')
 
   const categoriesPlaceholder = [

package/src/components/FilterBar/components/divider/Divider.tsx

@@ -2,6 +2,6 @@ import React from 'react'
 
 import './Divider.css'
 
-export default function Divider() {
+export const Divider = () => {
   return <div className="will-filter-bar-divider" />
 }

package/src/components/FilterBar/components/guests/Guests.tsx

@@ -1,38 +1,42 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import GuestCount from './GuestCount/GuestCount'
-import { AgeCategoryCount, GuestsPropsType } from '../../FilterBarTypes'
+import { AgeCategoryCount, AgeCategoryType } from '../../FilterBarTypes'
 
 import './Guests.css'
 
-export default function Guests({
-  ageCategories,
-  updateGuestsCount,
-  ageCategoryCounts,
-}: GuestsPropsType) {
-  const { t } = useTranslation('filterBar')
-  return (
-    <div className="will-filter-bar-guests">
-      <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
+type Props = {
+  ageCategories: AgeCategoryType[]
+  updateGuestsCount: (arg1: string, arg2: number) => void
+  ageCategoryCounts: AgeCategoryCount | {}
+}
+
+export const Guests = forwardRef<HTMLDivElement, Props>(
+  ({ ageCategories, updateGuestsCount, ageCategoryCounts }: Props, ref) => {
+    const { t } = useTranslation('filterBar')
+    return (
+      <div className="will-filter-bar-guests" ref={ref}>
+        <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
 
-      <div className="will-guests-filter-container">
-        {ageCategories?.map((category) => (
-          <GuestCount
-            key={category.id}
-            id={parseInt(category.id)}
-            label={category.name}
-            minVal={category.minVal}
-            sortOrder={category.sortOrder}
-            updateGuestsCount={updateGuestsCount}
-            count={
-              (ageCategoryCounts as AgeCategoryCount)[
-                `guests-${category.id}`
-              ] || category.minVal
-            }
-          />
-        ))}
+        <div className="will-guests-filter-container">
+          {ageCategories?.map((category) => (
+            <GuestCount
+              key={category.id}
+              id={parseInt(category.id)}
+              label={category.name}
+              minVal={category.minVal}
+              sortOrder={category.sortOrder}
+              updateGuestsCount={updateGuestsCount}
+              count={
+                (ageCategoryCounts as AgeCategoryCount)[
+                  `guests-${category.id}`
+                ] || category.minVal
+              }
+            />
+          ))}
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  }
+)

package/src/components/FilterBar/components/index.ts

@@ -0,0 +1,6 @@
+export { CloseButton, SelectButton, SubmitButton, TabButton } from './buttons'
+
+export { Guests } from './guests/Guests'
+export { Calendar } from './calendar/Calendar'
+export { Divider } from './divider/Divider'
+export { Categories } from './categories/Categories'

package/src/components/FilterBar/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useFilterBar } from './useFilterBar'
+export { useScrollInToView } from './useScrollInToView'
+export { useUpdateTranslations } from './useUpdateTranslations'
+export { useCloseFilterSection } from './useCloseFilterSection'

package/src/components/FilterBar/hooks/useCloseFilterSection.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react'
+
+type Props = {
+  handleSelectedFilter: (arg: boolean) => void
+}
+
+export const useCloseFilterSection = ({ handleSelectedFilter }: Props) => {
+  const filtersRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        filtersRef.current &&
+        !filtersRef.current.contains(event.target as Node)
+      ) {
+        handleSelectedFilter(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [filtersRef])
+
+  return { filtersRef }
+}