willba-component-library 0.2.8 → 0.2.11

package/lib/themes/useTheme.d.ts

@@ -1,11 +1,11 @@
 import { CSSProperties } from 'react';
-export interface Palette {
+export type Palette = {
     primary: string;
     secondary: string;
-}
-export interface ThemeProps {
+};
+export type ThemeProps = {
     palette?: Palette;
-}
+};
 interface CustomPaletteTypes extends CSSProperties {
     '--will-primary'?: string;
     '--will-secondary'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.2.8",
+  "version": "0.2.11",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.tsx

@@ -1,30 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
+import { FaSearch } from 'react-icons/fa'
 
-import useTheme, { Palette } from '../../themes/useTheme'
+import useTheme from '../../themes/useTheme'
 import '../../themes/Default.css'
-
-import { parseDates, parseGuests } from './utils'
-import {
-  AgeCategoryType,
-  CalendarOffset,
-  FilterSections,
-  Filters,
-  Pages,
-  Tab,
-} from './FilterBarTypes'
 import {
+  useAwaitRender,
   useCloseFilterSection,
-  useFilterBar,
-  useScrollInToView,
   useUpdateTranslations,
-} from './hooks'
+} from '../../core/hooks'
+import { Calendar, SubmitButton, CloseButton } from '../../core/components'
+import { parseDates } from '../../core/utils'
+
+import { parseGuests } from './utils'
+import { FilterBarProps, FilterSections, Pages } from './FilterBarTypes'
+import { useFilterBar, useScrollInToView } from './hooks'
 import {
   TabButton,
   SelectButton,
-  SubmitButton,
-  CloseButton,
-  Calendar,
   Guests,
   Divider,
   Categories,
@@ -32,19 +25,6 @@ import {
 
 import './FilterBar.css'
 
-export type FilterBarProps = {
-  language?: string
-  ageCategories?: AgeCategoryType[]
-  redirectUrl?: string
-  palette?: Palette
-  onSubmit?: ((val: Filters) => void) | null
-  fullWidth?: boolean
-  calendarOffset?: CalendarOffset
-  mode?: string
-  defaultTab?: string
-  tabs?: Tab[]
-}
-
 export default function FilterBar({
   language,
   ageCategories = AGE_CATEGORIES_FALLBACK,
@@ -90,15 +70,7 @@ export default function FilterBar({
   const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
 
   // Display component after fully loaded
-  const [initialRenderComplete, setInitialRenderComplete] =
-    useState<boolean>(false)
-
-  useEffect(() => {
-    setInitialRenderComplete(true)
-  }, [])
-
-  if (!initialRenderComplete) return null
-  //----/----
+  useAwaitRender()
 
   // Parsed data for filter section description
   const parsedDates = parseDates({ calendarRange })
@@ -138,7 +110,7 @@ export default function FilterBar({
       )}
 
       <div
-        className={`will-filter-bar-header ${mode || 'dark'}`}
+        className={`will-filter-bar-header ${mode || 'light'}`}
         ref={tabs?.length === 1 ? targetFilterBarRef : null}
       >
         <SelectButton
@@ -167,12 +139,16 @@ export default function FilterBar({
           </>
         )}
 
-        <SubmitButton onClick={handleSubmit} />
+        <SubmitButton
+          onClick={handleSubmit}
+          startIcon={<FaSearch />}
+          label={t('common:search')}
+        />
       </div>
 
       {selectedFilter && (
         <div
-          className={`will-filter-bar-container ${mode || 'dark'}`}
+          className={`will-filter-bar-container ${mode || 'light'}`}
           style={(!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}}
         >
           <CloseButton handleClose={() => handleSelectedFilter(false)} />
@@ -184,7 +160,7 @@ export default function FilterBar({
               ref={filtersRef}
               calendarOffset={calendarOffset}
               selectedPath={selectedPath}
-              locale={language}
+              language={language}
             />
           )}
           {selectedFilter === FilterSections.GUESTS && (

package/src/components/FilterBar/FilterBarTypes.ts

@@ -1,3 +1,19 @@
+import { Palette } from '../../themes/useTheme'
+import { CalendarOffset } from '../../core/components/calendar/CalendarTypes'
+
+export type FilterBarProps = {
+  language?: string
+  ageCategories?: AgeCategoryType[]
+  redirectUrl?: string
+  palette?: Palette
+  onSubmit?: ((val: Filters) => void) | null
+  fullWidth?: boolean
+  calendarOffset?: CalendarOffset
+  mode?: string
+  defaultTab?: string
+  tabs?: Tab[]
+}
+
 export type AgeCategoryCount = {
   [categoryId: string]: number
 }
@@ -31,10 +47,6 @@ export enum Pages {
   EVENTS = '/events',
 }
 
-export type CalendarOffset = {
-  [key: string]: number
-}
-
 type Translations = {
   en: string
   fi: string

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

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

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

@@ -12,7 +12,7 @@ type Props = {
 export const TabButton = ({ onClick, label, active, mode }: Props) => {
   return (
     <button
-      className={`will-filter-bar-tab-button ${mode || 'dark'} ${
+      className={`will-filter-bar-tab-button ${mode || 'light'} ${
         active && 'active'
       } `}
       onClick={onClick}

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

@@ -1,6 +1,5 @@
 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

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

package/src/components/FilterBar/utils/index.tsx

@@ -1,2 +1 @@
-export { parseDates } from './parseDates'
 export { parseGuests } from './parseGuests'

package/src/components/FilterCalendar/FilterCalendar.css

@@ -0,0 +1,67 @@
+.will-root .will-calendar-wrapper {
+    box-shadow: var(--will-box-shadow-dark);
+    border-radius: 20px;
+}
+
+.will-root .will-calendar-wrapper .will-calendar-header,
+.will-root .will-calendar-wrapper .will-calendar-main,
+.will-root .will-calendar-wrapper .will-calendar-footer {
+   padding: 20px;
+}
+
+/* Header */
+
+.will-root .will-calendar-wrapper .will-calendar-header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid grey;
+}
+
+/* Footer */
+
+.will-root .will-calendar-wrapper .will-calendar-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid grey;
+}
+
+.will-root .will-calendar-wrapper .will-calendar-footer-dates > div {
+    margin-bottom: 5px;
+}
+
+.will-root .will-calendar-wrapper .will-calendar-footer-dates-separator {
+    margin: 0 15px;
+}
+
+.will-root .will-calendar-wrapper .will-calendar-footer-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+@media (max-width: 960px) {
+    .will-root .will-calendar-wrapper .will-calendar-footer {
+        flex-direction: column;
+    }
+
+    .will-root .will-calendar-wrapper .will-calendar-footer-dates  {
+        margin-bottom: 20px;
+        text-align: center;
+    }
+
+    .will-root .will-calendar-wrapper .will-calendar-footer-actions {
+       flex-direction: column;
+       width: 100%;
+    }
+
+    .will-root .will-calendar-wrapper .will-calendar-footer-actions button{
+        width: 100%;
+     }
+  }
+
+/**/
+
+.will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {
+    position: initial;
+}

package/src/components/FilterCalendar/FilterCalendar.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import FilterCalendar from './FilterCalendar'
+
+const meta: Meta<typeof FilterCalendar> = {
+  title: 'Components/FilterCalendar',
+  component: FilterCalendar,
+}
+
+export default meta
+
+type Story = StoryObj<typeof FilterCalendar>
+
+export const Primary: Story = {
+  args: {
+    calendarOffsetGroup: [
+      {
+        from: new Date('06.04.2024'),
+        to: new Date('06.04.2024'),
+      },
+      {
+        from: new Date('06.05.2024'),
+        to: new Date('06.05.2024'),
+      },
+      {
+        from: new Date('06.06.2024'),
+        to: new Date('06.06.2024'),
+      },
+      {
+        from: new Date('06.09.2024'),
+        to: new Date('06.09.2024'),
+      },
+    ],
+    language: 'en',
+    palette: {
+      primary: '',
+      secondary: '',
+    },
+    openCalendar: true,
+    onSubmit: (val: any) => console.log(val),
+  },
+  render: (args) => (
+    <div style={{ padding: '30px', height: '100vh' }}>
+      <FilterCalendar {...args} />
+    </div>
+  ),
+}

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import useTheme from '../../themes/useTheme'
+import '../../themes/Default.css'
+import { Calendar, SubmitButton, CloseButton } from '../../core/components'
+import {
+  useAwaitRender,
+  useCloseFilterSection,
+  useUpdateTranslations,
+} from '../../core/hooks'
+import { nightsCount, parseDate } from '../../core/utils'
+
+import { FilterCalendarType } from './FilterCalendarTypes'
+import { useFilterCalendar } from './hooks/useFilterCalendar'
+
+import './FilterCalendar.css'
+
+export default function FilterCalendar({
+  calendarOffset,
+  language,
+  palette,
+  openCalendar,
+  onSubmit,
+  calendarOffsetGroup,
+}: FilterCalendarType) {
+  const themePalette = useTheme({ palette })
+
+  // Translations
+  useUpdateTranslations({ language })
+  const { t } = useTranslation()
+
+  const {
+    handleSubmit,
+    setToggleCalendar,
+    setCalendarRange,
+    handleClearDates,
+    toggleCalendar,
+    calendarRange,
+  } = useFilterCalendar({ onSubmit })
+
+  // Display component after fully loaded
+  useAwaitRender()
+
+  useEffect(() => {
+    if (openCalendar) setToggleCalendar(true)
+  }, [openCalendar])
+
+  // Handle close filter section
+  const { filtersRef } = useCloseFilterSection({
+    handleSelectedFilter: setToggleCalendar,
+  })
+
+  const nights = nightsCount({ calendarRange })
+
+  return (
+    <div className={`will-root`} style={themePalette}>
+      {toggleCalendar && (
+        <div className={`will-calendar-wrapper`} ref={filtersRef}>
+          <div className={`will-calendar-header`}>
+            <h2>{t('filterBar:calendar.title')}</h2>
+            <CloseButton handleClose={() => setToggleCalendar(false)} />
+          </div>
+          <div className={`will-calendar-main`}>
+            <Calendar
+              calendarRange={calendarRange}
+              setCalendarRange={setCalendarRange}
+              calendarOffset={calendarOffset}
+              selectedPath={'/rooms'}
+              language={language}
+              calendarOffsetGroup={calendarOffsetGroup}
+            />
+          </div>
+          <div className={`will-calendar-footer`}>
+            <div className={`will-calendar-footer-dates`}>
+              <div>
+                <span>
+                  {parseDate({
+                    date: calendarRange?.from,
+                    dateFormat: 'EEEEEE d.M.yyyy',
+                  }) || t('common:checkIn')}
+                </span>
+                <span className={`will-calendar-footer-dates-separator`}>
+                  -
+                </span>
+                <span>
+                  {parseDate({
+                    date: calendarRange?.to,
+                    dateFormat: 'EEEEEE d.M.yyyy',
+                  }) || t('common:checkOut')}
+                </span>
+              </div>
+              {nights && (
+                <span>{`${nights} ${t(
+                  `common:${nights > 1 ? 'nights' : 'night'}`
+                )}`}</span>
+              )}
+            </div>
+            <div className={`will-calendar-footer-actions`}>
+              <SubmitButton
+                onClick={handleClearDates}
+                disabled={!calendarRange?.from}
+                label={'Clear dates'}
+              />
+              <SubmitButton onClick={handleSubmit} label={t(`common:search`)} />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/FilterCalendar/FilterCalendarTypes.ts

@@ -0,0 +1,10 @@
+import { DateRange } from 'react-day-picker'
+
+import { Palette } from '../../themes/useTheme'
+import { CalendarTypes } from '../../core/components/calendar/CalendarTypes'
+
+export interface FilterCalendarType extends Partial<CalendarTypes> {
+  palette: Palette
+  openCalendar?: boolean
+  onSubmit: (val: DateRange) => void
+}

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

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { DateRange } from 'react-day-picker'
+
+type Props = {
+  onSubmit: (val: any) => void
+}
+
+export const useFilterCalendar = ({ onSubmit }: Props) => {
+  const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
+  const [toggleCalendar, setToggleCalendar] = useState<boolean>(false)
+
+  const handleSubmit = () => {
+    return onSubmit(calendarRange)
+  }
+
+  const handleClearDates = () => {
+    setCalendarRange(undefined)
+  }
+
+  return {
+    handleSubmit,
+    handleClearDates,
+    setToggleCalendar,
+    setCalendarRange,
+
+    calendarRange,
+    toggleCalendar,
+  }
+}

package/src/components/FilterCalendar/index.ts

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

package/src/{components/FilterBar → core}/components/buttons/submit-button/SubmitButton.css

@@ -19,6 +19,12 @@
  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;

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

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react'
+
+import './SubmitButton.css'
+
+type Props = {
+  onClick?: () => void
+  startIcon?: ReactNode
+  label?: string
+  disabled?: boolean
+}
+
+export const SubmitButton = ({
+  onClick,
+  startIcon,
+  label,
+  disabled,
+}: Props) => {
+  return (
+    <button
+      className="will-filter-bar-submit-button"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {startIcon && <span>{startIcon}</span>}
+      {label || 'Label'}
+    </button>
+  )
+}

package/src/{components/FilterBar → core}/components/calendar/Calendar.css

@@ -1,18 +1,7 @@
-.will-calendar-filter-header {
-  padding: 15px 0;
-  border-bottom: 1px solid var(--will-grey);
-}
-
-.will-calendar-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0;
-  text-align: left;
-}
-
 .will-calendar-filter-container {
   display: flex;
   justify-content: center;
+  user-select: none;
 }
 
 /* Calendar overrides */

package/src/{components/FilterBar → core}/components/calendar/Calendar.tsx

@@ -1,31 +1,23 @@
 import React, { forwardRef, useEffect } from 'react'
-import { DateRange, DayPicker } from 'react-day-picker'
+import { DayPicker } from 'react-day-picker'
 import { addDays, startOfDay } from 'date-fns'
 import { fi, enUS } from 'date-fns/locale'
 import { useMediaQuery } from 'react-responsive'
 
-import { CalendarOffset } from '../../FilterBarTypes'
-
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
+import { CalendarTypes } from './CalendarTypes'
 
-type Props = {
-  calendarRange: DateRange | undefined
-  setCalendarRange: (range: DateRange | undefined) => void
-  calendarOffset?: CalendarOffset
-  selectedPath: string
-  locale?: string
-}
-
-export const Calendar = forwardRef<HTMLDivElement, Props>(
+export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
   (
     {
       calendarRange,
       setCalendarRange,
       calendarOffset,
       selectedPath,
-      locale,
-    }: Props,
+      language,
+      calendarOffsetGroup,
+    }: CalendarTypes,
     ref
   ) => {
     const isTablet = useMediaQuery({ maxWidth: 960 })
@@ -36,11 +28,12 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
 
     const today = startOfDay(new Date())
 
-    const daysToOffsetCalendar = calendarOffset
-      ? Object.entries(calendarOffset)?.find(
-          (page) => selectedPath.substring(1) === page[0]
-        )
-      : null
+    const daysToOffsetCalendar =
+      calendarOffset && selectedPath
+        ? Object.entries(calendarOffset)?.find(
+            (page) => selectedPath?.substring(1) === page[0]
+          )
+        : null
 
     const disabledDays = [
       {
@@ -51,6 +44,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
         to: addDays(today, -100),
       },
     ]
+
     const selectedStartDate = calendarRange?.from
 
     return (
@@ -59,7 +53,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
           <DayPicker
             id="will-calendar"
             mode="range"
-            locale={locale === 'en' ? enUS : fi}
+            locale={language === 'en' ? enUS : fi}
             numberOfMonths={!isTablet ? 2 : 1}
             weekStartsOn={1}
             selected={calendarRange}
@@ -72,7 +66,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(
             }}
             captionLayout="dropdown-buttons"
             defaultMonth={selectedStartDate || disabledDays[0].from}
-            disabled={disabledDays}
+            disabled={calendarOffsetGroup || disabledDays}
             fromMonth={today}
           />
         </div>

package/src/core/components/calendar/CalendarTypes.ts

@@ -0,0 +1,17 @@
+import { DateRange } from 'react-day-picker'
+
+export type CalendarOffset = {
+  [key: string]: number
+}
+
+export type CalendarTypes = {
+  calendarRange?: DateRange | undefined
+  setCalendarRange: (range: DateRange | undefined) => void
+  calendarOffset?: CalendarOffset
+  selectedPath?: string
+  language?: string
+  calendarOffsetGroup?: {
+    from: Date
+    to: Date
+  }[]
+}

package/src/core/components/index.ts

@@ -0,0 +1,4 @@
+export { SubmitButton } from './buttons/submit-button/SubmitButton'
+export { CloseButton } from './buttons/close-button/CloseButton'
+
+export { Calendar } from './calendar/Calendar'

package/src/core/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useAwaitRender } from './useAwaitRender'
+export { useUpdateTranslations } from './useUpdateTranslations'
+export { useCloseFilterSection } from './useCloseFilterSection'

package/src/core/hooks/useAwaitRender.tsx

@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react'
+
+export const useAwaitRender = () => {
+  const [initialRenderComplete, setInitialRenderComplete] =
+    useState<boolean>(false)
+
+  useEffect(() => {
+    setInitialRenderComplete(true)
+  }, [])
+
+  if (!initialRenderComplete) return null
+}

package/src/{components/FilterBar → core}/hooks/useCloseFilterSection.tsx

@@ -4,6 +4,7 @@ type Props = {
   handleSelectedFilter: (arg: boolean) => void
 }
 
+// TODO - Refactor and rename this hook
 export const useCloseFilterSection = ({ handleSelectedFilter }: Props) => {
   const filtersRef = useRef<HTMLDivElement | null>(null)