willba-component-library 0.3.26 → 0.4.0

package/src/components/FilterBar/components/FilterPanels/Locations/Locations.tsx

@@ -1,94 +0,0 @@
-import React, { forwardRef, useEffect, useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { CloseButton } from '../../../../../core/components'
-import { Location } from '../../../FilterBarTypes'
-import { ImageCard } from '../../ImageCard/ImageCard'
-import { SectionHeader } from '../SectionHeader/SectionHeader'
-
-import './Locations.css'
-
-type Props = {
-  locations?: Location[]
-  selectedLocations: Location[]
-  setSelectedLocations: (locations: Location[]) => void
-  autoFocus?: boolean
-  multiSelect?: boolean
-  onClose?: () => void
-}
-
-export const Locations = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      locations,
-      selectedLocations,
-      setSelectedLocations,
-      autoFocus,
-      multiSelect = false,
-      onClose,
-    },
-    ref
-  ) => {
-    const { t } = useTranslation('filterBar')
-    const firstCardRef = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-      if (autoFocus && firstCardRef.current) {
-        firstCardRef.current.focus()
-      }
-    }, [autoFocus])
-
-    const handleLocationClick = (location: Location) => {
-      if (multiSelect) {
-        // Multi-select: toggle location in array
-        const isSelected = selectedLocations.some(
-          (loc) => loc.id === location.id
-        )
-
-        if (isSelected) {
-          // Remove location if already selected
-          setSelectedLocations(
-            selectedLocations.filter((loc) => loc.id !== location.id)
-          )
-        } else {
-          // Add location to selection
-          setSelectedLocations([...selectedLocations, location])
-        }
-      } else {
-        // Single-select: replace selection with clicked location and close modal
-        setSelectedLocations([location])
-        onClose?.()
-      }
-    }
-
-    return (
-      <div id="will-filter-bar-locations" ref={ref}>
-        <SectionHeader
-          title={t('locations.title')}
-          action={onClose && <CloseButton handleClose={onClose} />}
-        />
-
-        <div className="will-locations-filter-container">
-          {!!locations?.length &&
-            locations.map((location, index) => {
-              return (
-                <ImageCard
-                  key={location.id}
-                  ref={index === 0 ? firstCardRef : null}
-                  title={location.label}
-                  description={location.description}
-                  imageUrl={location.imageUrl}
-                  isSelected={selectedLocations.some(
-                    (loc) => loc.id === location.id
-                  )}
-                  onClick={() => handleLocationClick(location)}
-                />
-              )
-            })}
-        </div>
-      </div>
-    )
-  }
-)
-
-Locations.displayName = 'Locations'

package/src/components/FilterBar/components/FilterPanels/SectionHeader/SectionHeader.css

@@ -1,34 +0,0 @@
-.will-filter-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 30px;
-}
-
-.will-filter-section-title {
-  font-size: 22px;
-  margin: 0;
-}
-
-.will-filter-section-action {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.will-filter-section-action .will-filter-bar-close-button {
-  position: relative;
-  top: auto;
-  right: auto;
-  margin: 0;
-}
-
-@media (max-width: 960px) {
-  .will-filter-section-header {
-    padding: 16px 20px;
-  }
-
-  .will-filter-section-title {
-    font-size: 18px;
-  }
-}

package/src/components/FilterBar/components/FilterPanels/SectionHeader/SectionHeader.tsx

@@ -1,17 +0,0 @@
-import React, { ReactNode } from 'react'
-
-import './SectionHeader.css'
-
-type Props = {
-  title: string
-  action?: ReactNode
-}
-
-export const SectionHeader = ({ title, action }: Props) => {
-  return (
-    <div className="will-filter-section-header">
-      <h3 className="will-filter-section-title">{title}</h3>
-      {action && <div className="will-filter-section-action">{action}</div>}
-    </div>
-  )
-}

package/src/components/FilterBar/components/FilterTabs/FilterTabs.css

@@ -1,10 +0,0 @@
-.will-filter-bar-tabs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 222;
-  background: transparent;
-  padding: 10px;
-  gap: 10px;
-}

package/src/components/FilterBar/components/FilterTabs/FilterTabs.tsx

@@ -1,50 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { useTranslation } from 'react-i18next'
-
-import { useFilterBar } from '../../providers'
-
-import { TabButton } from '../TabButton/TabButton'
-
-import './FilterTabs.css'
-
-export const FilterTabs = () => {
-  const { t } = useTranslation('filterBar')
-
-  const {
-    selectedPath,
-    mode,
-    tabs,
-    tabsRef,
-    handleSelectedFilter,
-    setSelectedPath,
-    handleResetFilters,
-  } = useFilterBar()
-
-  const sortedTabs = useMemo(
-    () => [...(tabs ?? [])].sort((a, b) => a.order - b.order),
-    [tabs]
-  )
-
-  const handleTabClick = (path: string) => {
-    setSelectedPath(path)
-    handleResetFilters()
-    handleSelectedFilter(false)
-  }
-
-  if (sortedTabs.length <= 1) return null
-
-  return (
-    <div className="will-filter-bar-tabs" ref={tabsRef}>
-      {sortedTabs.map((tab) => (
-        <TabButton
-          key={tab.path}
-          label={tab.label || t(`tabs.${tab.path.slice(1)}`)}
-          onClick={() => handleTabClick(tab.path)}
-          active={selectedPath === tab.path}
-          mode={mode}
-        />
-      ))}
-    </div>
-  )
-}

package/src/components/FilterBar/components/ImageCard/ImageCard.css

@@ -1,30 +0,0 @@
-.will-image-card {
-  display: flex;
-  gap: 20px;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 30px;
-  cursor: pointer;
-  user-select: none;
-  min-height: 40px;
-}
-
-.will-image-card.is-selected {
-  background-color: var(--will-transparent-lavender);
-}
-
-.will-image-card:hover {
-  background-color: var(--will-transparent-lavender);
-}
-
-.will-image-card-image img {
-  width: 120px;
-  height: 68px;
-  object-fit: cover;
-}
-
-@media (max-width: 960px) {
-  .will-image-card {
-    padding: 8px 20px;
-  }
-}

package/src/components/FilterBar/components/ImageCard/ImageCard.tsx

@@ -1,45 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import './ImageCard.css'
-
-type Props = {
-  title?: string
-  description?: string | null
-  imageUrl?: string | null
-  isSelected: boolean
-  onClick?: () => void
-}
-
-export const ImageCard = forwardRef<HTMLDivElement, Props>(
-  ({ title, description, imageUrl, isSelected, onClick }, ref) => {
-    const ariaLabel = `${title}${description ? `, ${description}` : ''}`
-
-    return (
-      <div
-        ref={ref}
-        className={`will-image-card ${isSelected ? 'is-selected' : ''}`}
-        onClick={onClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault()
-            onClick?.()
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        aria-pressed={isSelected}
-        aria-label={ariaLabel}
-      >
-        <div className="will-image-card-content">
-          <h3>{title}</h3>
-          {description && <p>{description}</p>}
-        </div>
-        <div className="will-image-card-image">
-          {imageUrl && <img src={imageUrl} alt={title || 'Location image'} />}
-        </div>
-      </div>
-    )
-  }
-)
-
-ImageCard.displayName = 'ImageCard'

package/src/components/FilterBar/components/SelectButton/SelectButton.css

@@ -1,76 +0,0 @@
-.will-filter-bar-select-button {
-  width: 100%;
-  height: auto;
-  background-color: transparent;
-  border: none;
-  padding: 0 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-size: 14px;
-  text-align: initial;
-  user-select: none;
-}
-
-.will-filter-bar-select-button.disabled {
-  cursor: not-allowed;
-}
-
-.will-filter-bar-select-button .select-button-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.will-filter-bar-select-button .select-button-wrapper > div {
-  display: grid;
-}
-
-.will-filter-bar-select-button .select-button-label {
-  color: var(--will-black);
-  font-weight: 600;
-}
-
-.will-filter-bar-select-button .select-button-description {
-  color: var(--will-black);
-  font-weight: 400;
-  opacity: 0.5;
-  white-space: nowrap;
-  min-height: 19px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.will-filter-bar-select-button .select-button-description span {
-  font: inherit;
-}
-
-.will-filter-bar-select-button .select-button-label.active,
-.will-filter-bar-select-button .select-button-description.active {
-  font-weight: 700;
-  font-size: 15px;
-  opacity: 1;
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-select-button {
-    padding: 15px 0;
-  }
-
-  .will-filter-bar-select-button:first-child {
-    padding: 0 0 15px 0;
-  }
-
-  .will-filter-bar-select-button .select-button-wrapper {
-    justify-content: center;
-    text-align: center;
-  }
-
-  .will-filter-bar-select-button .select-button-description {
-    white-space: wrap;
-  }
-
-  .will-filter-bar-select-button .select-button-divider {
-    display: none;
-  }
-}

package/src/components/FilterBar/components/SelectButton/SelectButton.tsx

@@ -1,54 +0,0 @@
-import React, { forwardRef, ReactNode, MouseEvent } from 'react'
-
-import './SelectButton.css'
-
-type Props = {
-  label: string
-  onClick: (e: MouseEvent<HTMLButtonElement>) => void
-  description: ReactNode
-  active?: boolean
-  disabled?: boolean
-  ariaExpanded?: boolean
-  ariaControls?: string
-}
-
-export const SelectButton = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      active,
-      label,
-      onClick,
-      description,
-      disabled,
-      ariaExpanded,
-      ariaControls,
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        className={`will-filter-bar-select-button ${disabled ? 'disabled' : ''}`}
-        onClick={(e) => (disabled ? undefined : onClick(e))}
-        disabled={disabled}
-        aria-expanded={ariaExpanded}
-        aria-controls={ariaControls}
-        aria-haspopup="true"
-        aria-disabled={disabled}
-      >
-        <span className="select-button-wrapper">
-          <div>
-            <p className={`select-button-label`}>{label}</p>
-            <p
-              className={`select-button-description ${active ? 'active' : ''}`}
-            >
-              {description}
-            </p>
-          </div>
-        </span>
-      </button>
-    )
-  }
-)
-
-SelectButton.displayName = 'SelectButton'

package/src/components/FilterBar/components/TabButton/TabButton.css

@@ -1,36 +0,0 @@
-.will-filter-bar-tab-button {
-    width: auto;
-    height: auto;
-    padding: 10px 20px;
-    cursor: pointer;
-    border: none;
-    white-space: nowrap;
-    font-size: 16px;
-    display: flex;
-    align-items: center;
-    background-color: transparent;
-    user-select: none;
-    font-weight: 600;
-    border-radius: 50px;
-  }
-
-  .will-filter-bar-tab-button.light {
-    color: var(--will-white)
-  }
-
-  .will-filter-bar-tab-button.dark {
-    color: var(--will-black)
-  }
-
-  .will-filter-bar-tab-button.light.active,
-  .will-filter-bar-tab-button:hover {
-    background-color: var(--will-transparent-white);
-  }
-
-  .will-filter-bar-tab-button.dark.active,
-  .will-filter-bar-tab-button:hover {
-    background-color: var(--will-transparent-lavender);
-  }
-
- 
-

package/src/components/FilterBar/components/TabButton/TabButton.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import './TabButton.css'
-
-type Props = {
-  onClick?: () => void
-  label: string
-  active?: boolean
-  mode?: string
-}
-
-export const TabButton = ({ onClick, label, active, mode }: Props) => {
-  return (
-    <button
-      className={`will-filter-bar-tab-button ${mode || 'light'} ${
-        active && 'active'
-      } `}
-      onClick={onClick}
-    >
-      {label}
-    </button>
-  )
-}

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

@@ -1,6 +0,0 @@
-export { SelectButton } from './SelectButton/SelectButton'
-export { TabButton } from './TabButton/TabButton'
-export { Divider } from './Divider/Divider'
-export { FilterPanels } from './FilterPanels/FilterPanels'
-export { FilterControls } from './FilterControls/FilterControls'
-export { FilterTabs } from './FilterTabs/FilterTabs'

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

@@ -1,5 +0,0 @@
-export { useScrollInToView } from './useScrollInToView'
-export { useFilterState } from './useFilterState'
-export { useFilterActions } from './useFilterActions'
-export { useFilterRefs } from './useFilterRefs'
-export { usePanelPosition } from './usePanelPosition'

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

@@ -1,126 +0,0 @@
-import { Dispatch, SetStateAction, useEffect } from 'react'
-import { DateRange } from 'react-day-picker'
-import { format } from 'date-fns'
-
-import {
-  AgeCategoryCount,
-  FilterBarTypes,
-  Locations,
-  Pages,
-} from '../FilterBarTypes'
-import { ageCategoryRules } from '../utils'
-
-type Props = {
-  tabs: FilterBarTypes['tabs']
-  ageCategories: FilterBarTypes['ageCategories']
-  redirectUrl: FilterBarTypes['redirectUrl']
-  ageCategoryCounts: AgeCategoryCount
-  selectedLocations: Locations['data']
-  calendarRange?: DateRange
-  selectedPath: string
-  setSelectedPath: (val: string) => void
-  setAgeCategoryCounts: Dispatch<SetStateAction<AgeCategoryCount>>
-  setSelectedFilter: (val: string | boolean) => void
-  setCalendarRange: (val: DateRange | undefined) => void
-  onSubmit: FilterBarTypes['onSubmit']
-  setInnerLoading: (val: boolean) => void
-}
-
-export const useFilterActions = ({
-  tabs,
-  calendarRange,
-  ageCategoryCounts,
-  ageCategories,
-  selectedLocations,
-  selectedPath,
-  redirectUrl,
-  setSelectedPath,
-  setAgeCategoryCounts,
-  setSelectedFilter,
-  setCalendarRange,
-  onSubmit,
-  setInnerLoading,
-}: Props) => {
-  useEffect(() => {
-    if (typeof window === 'undefined') return
-
-    const defaultTab =
-      tabs?.length === 1 ? tabs[0] : tabs?.find((tab) => tab.default)
-
-    const paths = [Pages.EVENTS, Pages.ROOMS, Pages.SALES]
-
-    const currentPath =
-      paths.find((path) => window.location.pathname.includes(path)) ||
-      defaultTab?.path ||
-      Pages.EVENTS
-
-    setSelectedPath(currentPath)
-  }, [tabs])
-
-  const updateGuestsCount = (id: string, newCount: number) => {
-    setAgeCategoryCounts((prev) => ({
-      ...prev,
-      [id]: newCount,
-    }))
-  }
-
-  const handleSelectedFilter = (id: string | boolean) => {
-    setSelectedFilter(id)
-  }
-
-  const handleSubmit = () => {
-    if (typeof window === 'undefined') return
-
-    const newParams = {
-      startDate: calendarRange?.from
-        ? format(calendarRange.from, 'yyyy-MM-dd')
-        : '',
-      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
-      ageCategoryCounts: ageCategoryRules({
-        ageCategoryCounts,
-        ageCategories,
-      }),
-      selectedLocations: selectedLocations
-        .map((l) => l.id.toString())
-        .join(','),
-    }
-
-    const querySearchParams = new URLSearchParams()
-
-    for (const [key, value] of Object.entries(newParams)) {
-      if (!value) continue
-
-      if (key === 'selectedLocations' && selectedLocations.length) {
-        selectedLocations.forEach((location) =>
-          querySearchParams.append('locationId', location.id.toString())
-        )
-      } else {
-        querySearchParams.append(key, value.toString())
-      }
-    }
-
-    setSelectedFilter(false)
-
-    if (onSubmit && window.location.href.includes(selectedPath)) {
-      onSubmit(newParams)
-      return
-    }
-
-    const paramString = querySearchParams.toString()
-    const path = `${redirectUrl}${selectedPath}`
-
-    setInnerLoading(true)
-    window.location.href = paramString ? `${path}?${paramString}` : path
-  }
-
-  const handleResetFilters = () => {
-    setAgeCategoryCounts({})
-    setCalendarRange(undefined)
-  }
-  return {
-    updateGuestsCount,
-    handleSelectedFilter,
-    handleSubmit,
-    handleResetFilters,
-  }
-}

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

@@ -1,21 +0,0 @@
-import { useRef } from 'react'
-
-import { useScrollInToView } from './useScrollInToView'
-
-export const useFilterRefs = (selectedFilter: string | boolean) => {
-  const buttonRefs = useRef<Record<string, HTMLButtonElement | null>>({})
-  const panelRef = useRef<HTMLDivElement | null>(null)
-  const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
-  const filtersRef = useRef<HTMLDivElement | null>(null)
-
-  const { isMobile, tabsRef } = useScrollInToView({ selectedFilter })
-
-  return {
-    previouslyFocusedButtonRef,
-    isMobile,
-    tabsRef,
-    panelRef,
-    buttonRefs,
-    filtersRef,
-  }
-}