willba-component-library 0.1.46 → 0.1.48

package/package.json

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

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import FilterBar from './FilterBar'
+import { Filters } from './FilterBarTypes'
 
 const meta: Meta<typeof FilterBar> = {
   title: 'Components/FilterBar',
@@ -44,7 +45,7 @@ export const Primary: Story = {
   },
   render: (args) => (
     <div style={{ background: 'grey', padding: '30px', height: '100vh' }}>
-      <FilterBar {...args} />
+      <FilterBar {...args} onSubmit={(val: Filters) => console.log(val)} />
     </div>
   ),
 }

package/src/components/FilterBar/FilterBar.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { format } from 'date-fns'
 
 import useTheme, { Palette } from '../../themes/useTheme'
 import '../../themes/Default.css'
 
 import { parseDates, parseGuests } from './utils'
-import { AgeCategoryType } from './FilterBarTypes'
+import {
+  AgeCategoryType,
+  FilterSections,
+  Filters,
+  ViewApply,
+} from './FilterBarTypes'
 import {
   useCloseFilterSection,
   useFilterBar,
@@ -33,6 +37,7 @@ export type FilterBarProps = {
   redirectUrl?: string
   palette?: Palette
   currentViewApply?: string
+  onSubmit?: (val: Filters) => void
 }
 
 export default function FilterBar({
@@ -41,6 +46,7 @@ export default function FilterBar({
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
   currentViewApply,
+  onSubmit,
 }: FilterBarProps) {
   const themePalette = useTheme({ palette })
 
@@ -61,11 +67,16 @@ export default function FilterBar({
     handleSubmit,
     updateGuestsCount,
     setSelectedPath,
-  } = useFilterBar({ redirectUrl, currentViewApply, ageCategories })
-
-  // Default selected tab
+  } = useFilterBar({
+    redirectUrl,
+    currentViewApply,
+    ageCategories,
+    onSubmit,
+  })
+
+  // Default selected tab when tabs are hidden
   useEffect(() => {
-    if (currentViewApply === 'roomFilters') {
+    if (currentViewApply === ViewApply.ROOMS) {
       setSelectedPath('/rooms')
     }
   }, [])
@@ -76,6 +87,7 @@ export default function FilterBar({
   // Handle close filter section
   const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
 
+  // Parsed data for filter section description
   const parsedDates = parseDates({ calendarRange })
   const parsedGuests = parseGuests({ ageCategoryCounts, ageCategories })
 
@@ -112,11 +124,8 @@ export default function FilterBar({
               ? t('calendar.roomsLabelPlaceholder')
               : t('calendar.eventsLabelPlaceholder')
           }
-          onClick={() => handleSelectedFilter(1)}
-          style={fontWeightBold(selectedFilter === 1)}
-          date={
-            calendarRange?.to ? format(calendarRange.to, 'dd.MM.yyyy') : null
-          }
+          onClick={() => handleSelectedFilter(FilterSections.CALENDAR)}
+          active={selectedFilter === FilterSections.CALENDAR}
         />
 
         {selectedPath === '/rooms' && (
@@ -128,8 +137,8 @@ export default function FilterBar({
               description={
                 parsedGuests ? parsedGuests : t('guests.labelPlaceholder')
               }
-              onClick={() => handleSelectedFilter(2)}
-              style={fontWeightBold(selectedFilter === 2)}
+              onClick={() => handleSelectedFilter(FilterSections.GUESTS)}
+              active={selectedFilter === FilterSections.GUESTS}
             />
           </>
         )}
@@ -144,14 +153,14 @@ export default function FilterBar({
         >
           <CloseButton handleClose={() => handleSelectedFilter(false)} />
 
-          {selectedFilter === 1 && (
+          {selectedFilter === FilterSections.CALENDAR && (
             <Calendar
               calendarRange={calendarRange}
               setCalendarRange={setCalendarRange}
               ref={filtersRef}
             />
           )}
-          {selectedFilter === 2 && (
+          {selectedFilter === FilterSections.GUESTS && (
             <Guests
               updateGuestsCount={updateGuestsCount}
               ageCategories={ageCategories}
@@ -159,7 +168,7 @@ export default function FilterBar({
               ref={filtersRef}
             />
           )}
-          {selectedFilter === 3 && (
+          {selectedFilter === FilterSections.CATEGORIES && (
             <Categories categories={categories} setCategories={setCategories} />
           )}
         </div>
@@ -170,10 +179,6 @@ export default function FilterBar({
 
 ////////////
 
-const fontWeightBold = (input: boolean) => {
-  return { fontWeight: input ? 'bold' : 'initial' }
-}
-
 const AGE_CATEGORIES_FALLBACK = [
   {
     id: '1',

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,15 +1,15 @@
-export interface AgeCategoryCount {
+export type AgeCategoryCount = {
   [categoryId: string]: number
 }
 
-export interface AgeCategoryType {
+export type AgeCategoryType = {
   id: string
   name: string
   minVal: number
   sortOrder: number
 }
 
-export interface GuestsCountPropsType {
+export type GuestsCountPropsType = {
   label: string
   id: number
   updateGuestsCount: (arg1: string, arg2: number) => void
@@ -17,3 +17,15 @@ export interface GuestsCountPropsType {
   minVal: number
   sortOrder: number
 }
+
+export enum FilterSections {
+  CALENDAR = 'calendar',
+  GUESTS = 'guests',
+  CATEGORIES = 'categories',
+}
+
+export type Filters = { [key: string]: string | number }
+
+export enum ViewApply {
+  ROOMS = 'roomFilters',
+}

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

@@ -10,8 +10,6 @@
   text-align: initial;
 }
 
-
-
 .will-filter-bar-select-button .select-button-wrapper {
   display: flex;
   align-items: center;
@@ -24,16 +22,24 @@
   display: grid
 }
 
+.will-filter-bar-select-button .select-button-label {
+  font-weight: 500;
+}
+
 .will-filter-bar-select-button .select-button-description {
   font-weight: 400;
-  opacity: 0.4;
- 
- 
+  opacity: 0.8;
+  
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
  }
 
+ .will-filter-bar-select-button .select-button-label.active,
+ .will-filter-bar-select-button .select-button-description.active {
+  font-weight: 600;
+ }
+
 @media (max-width: 960px) {
   .will-filter-bar-select-button {
     padding: 15px 0;

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

@@ -5,21 +5,27 @@ import './SelectButton.css'
 type Props = {
   label: string
   onClick: () => void
-  style: Object
   description: string
+  active?: boolean
 }
 
-export const SelectButton = ({ label, onClick, style, description }: any) => {
+export const SelectButton = ({
+  active,
+  label,
+  onClick,
+
+  description,
+}: Props) => {
   return (
-    <button
-      className="will-filter-bar-select-button"
-      onClick={onClick}
-      style={style}
-    >
+    <button className="will-filter-bar-select-button" onClick={onClick}>
       <span className="select-button-wrapper">
         <div>
-          <p className="select-button-label">{label}</p>
-          <p className="select-button-description">{description}</p>
+          <p className={`select-button-label ${active ? 'active' : ''}`}>
+            {label}
+          </p>
+          <p className={`select-button-description ${active ? 'active' : ''}`}>
+            {description}
+          </p>
         </div>
       </span>
     </button>

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

@@ -2,22 +2,24 @@ import { useEffect, useState } from 'react'
 import { DateRange } from 'react-day-picker'
 import { format } from 'date-fns'
 
-import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
+import { AgeCategoryCount, AgeCategoryType, Filters } from '../FilterBarTypes'
 
 type Props = {
   redirectUrl?: string
   currentViewApply?: string
   ageCategories?: AgeCategoryType[]
+  onSubmit?: (val: Filters) => void
 }
 
 export const useFilterBar = ({
   redirectUrl,
   currentViewApply,
   ageCategories,
+  onSubmit,
 }: Props) => {
   const [selectedPath, setSelectedPath] = useState('/events')
 
-  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
+  const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
   const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
 
   const [categories, setCategories] = useState<number>(0)
@@ -80,7 +82,7 @@ export const useFilterBar = ({
     }))
   }
 
-  const handleSelectedFilter = (id: number | boolean) => {
+  const handleSelectedFilter = (id: string | boolean) => {
     setSelectedFilter(id)
   }
 
@@ -118,6 +120,19 @@ export const useFilterBar = ({
       const updatedUrl = `${baseUrl}?${updatedParams.toString()}`
 
       handleSelectedFilter(false)
+
+      if (onSubmit) {
+        const updatedParamsObject: { [key: string]: string | number } = {}
+
+        updatedParams.forEach((value, key) => {
+          updatedParamsObject[key] = value
+        })
+
+        console.log('sdasdasdsad', updatedParamsObject)
+
+        return onSubmit(updatedParamsObject)
+      }
+
       return (window.location.href = updatedUrl)
     } else {
       const querySearchParams = new URLSearchParams()
@@ -129,9 +144,12 @@ export const useFilterBar = ({
       }
 
       handleSelectedFilter(false)
-      return (window.location.href = `${redirectUrl}/${selectedPath}${
-        querySearchParams ? `?${querySearchParams.toString()}` : ''
-      }`)
+
+      return onSubmit
+        ? onSubmit(newParams)
+        : (window.location.href = `${redirectUrl}/${selectedPath}${
+            querySearchParams ? `?${querySearchParams.toString()}` : ''
+          }`)
     }
   }
 

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 type Props = {
-  selectedFilter: number | boolean
+  selectedFilter: string | boolean
 }
 
 export const useScrollInToView = ({ selectedFilter }: Props) => {
@@ -9,7 +9,7 @@ export const useScrollInToView = ({ selectedFilter }: Props) => {
   const targetFilterBarRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (window !== undefined && window.innerWidth > 960) {
+    if (typeof window !== 'undefined' && window.innerWidth > 960) {
       setIsMobile(false)
       return
     }

package/src/components/FilterBar/index.ts

@@ -1 +1,3 @@
-export { default } from "./FilterBar";
+export { default } from './FilterBar'
+
+export * from './FilterBarTypes'