willba-component-library 0.1.13 → 0.1.15

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

@@ -1,51 +1,51 @@
-import React from 'react'
-
-import { GuestsCountPropsType } from '../../../FilterBarTypes'
-
-import './GuestCount.css'
-
-export default function GuestCount({
-  label,
-  id,
-  updateGuestsCount,
-  count,
-  minVal,
-}: GuestsCountPropsType) {
-  const handleDecrement = () => {
-    if (count > minVal) {
-      updateGuestsCount(id, count - 1)
-    }
-  }
-
-  const handleIncrement = () => {
-    updateGuestsCount(id, count + 1)
-  }
-
-  return (
-    <div className="will-guests-filter-inner">
-      <span className="will-guests-filter-label">{label}</span>
-      <div>
-        <button
-          className="will-guests-filter-button"
-          onClick={handleDecrement}
-          disabled={minVal && count < 2 ? true : false}
-          style={{
-            cursor:
-              minVal && count < 2
-                ? 'initial'
-                : !minVal && count < 1
-                ? 'initial'
-                : 'pointer',
-            paddingBottom: '4px',
-          }}
-        >
-          -
-        </button>
-        <span className="will-guests-filter-count">{count}</span>
-        <button className="will-guests-filter-button" onClick={handleIncrement}>
-          +
-        </button>
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+
+import { GuestsCountPropsType } from '../../../FilterBarTypes'
+
+import './GuestCount.css'
+
+export default function GuestCount({
+  label,
+  id,
+  updateGuestsCount,
+  count,
+  minVal,
+}: GuestsCountPropsType) {
+  const handleDecrement = () => {
+    if (count > minVal) {
+      updateGuestsCount(id, count - 1)
+    }
+  }
+
+  const handleIncrement = () => {
+    updateGuestsCount(id, count + 1)
+  }
+
+  return (
+    <div className="will-guests-filter-inner">
+      <span className="will-guests-filter-label">{label}</span>
+      <div>
+        <button
+          className="will-guests-filter-button"
+          onClick={handleDecrement}
+          disabled={minVal && count < 2 ? true : false}
+          style={{
+            cursor:
+              minVal && count < 2
+                ? 'initial'
+                : !minVal && count < 1
+                ? 'initial'
+                : 'pointer',
+            paddingBottom: '4px',
+          }}
+        >
+          -
+        </button>
+        <span className="will-guests-filter-count">{count}</span>
+        <button className="will-guests-filter-button" onClick={handleIncrement}>
+          +
+        </button>
+      </div>
+    </div>
+  )
+}

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

@@ -1,28 +1,28 @@
-.will-filter-bar-guests {
-  text-align: initial;
-}
-
-.will-guests-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0;
-}
-
-.will-guests-filter-subtitle {
-  font-size: 15px;
-  font-weight: 500;
-  color:var(--will-text)
-}
-
-
-.will-guests-filter-container {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-
-@media (max-width: 960px) {
-  .will-guests-filter-container {
-   margin-top: 15px;
-  }
+.will-filter-bar-guests {
+  text-align: initial;
+}
+
+.will-guests-filter-title {
+  font-size: 16px;
+  text-transform: uppercase;
+  margin: 10px 0;
+}
+
+.will-guests-filter-subtitle {
+  font-size: 15px;
+  font-weight: 500;
+  color:var(--will-text)
+}
+
+
+.will-guests-filter-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+
+@media (max-width: 960px) {
+  .will-guests-filter-container {
+   margin-top: 15px;
+  }
 }

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

@@ -1,38 +1,38 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import GuestCount from './GuestCount/GuestCount'
-import { AgeCategoryCount, GuestsPropsType } 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>
-      <p className="will-guests-filter-subtitle">{t('guests.subtitle')}</p>
-
-      <div className="will-guests-filter-container">
-        {ageCategories?.map((category) => (
-          <GuestCount
-            key={category.id}
-            id={parseInt(category.id)}
-            label={category.name}
-            minVal={category.minVal}
-            updateGuestsCount={updateGuestsCount}
-            count={
-              (ageCategoryCounts as AgeCategoryCount)[category.id] ||
-              category.minVal
-            }
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import GuestCount from './GuestCount/GuestCount'
+import { AgeCategoryCount, GuestsPropsType } 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>
+      <p className="will-guests-filter-subtitle">{t('guests.subtitle')}</p>
+
+      <div className="will-guests-filter-container">
+        {ageCategories?.map((category) => (
+          <GuestCount
+            key={category.id}
+            id={parseInt(category.id)}
+            label={category.name}
+            minVal={category.minVal}
+            updateGuestsCount={updateGuestsCount}
+            count={
+              (ageCategoryCounts as AgeCategoryCount)[category.id] ||
+              category.minVal
+            }
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -1,106 +1,106 @@
-import { useEffect, useState } from 'react'
-import { DateRange } from 'react-day-picker'
-import { format } from 'date-fns'
-
-import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
-
-interface UseFilterBarPropsType {
-  redirectUrl: string
-}
-
-export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
-  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
-  const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
-
-  const [categories, setCategories] = useState<number>(0)
-  const [ageCategoryCounts, setAgeCategoryCounts] = useState<AgeCategoryCount>(
-    {}
-  )
-
-  const updateGuestsCount = (id: number, newCount: number) => {
-    setAgeCategoryCounts((prevCounts) => ({
-      ...prevCounts,
-      [id]: newCount,
-    }))
-  }
-
-  useEffect(() => {
-    const urlSearchParams = new URLSearchParams(window.location.search)
-
-    const startDateParam = urlSearchParams.get('startDate')
-    const endDateParam = urlSearchParams.get('endDate')
-    const ageCategoryCountsParam = JSON.parse(
-      urlSearchParams.get('ageCategoryCounts') || '{}'
-    )
-    const parsedCategories = parseInt(
-      urlSearchParams.get('categories') || '0',
-      10
-    )
-
-    if (startDateParam && endDateParam) {
-      setCalendarRange({
-        from: new Date(startDateParam),
-        to: new Date(endDateParam),
-      })
-    }
-    setAgeCategoryCounts(ageCategoryCountsParam)
-    setCategories(parsedCategories)
-  }, [])
-
-  const handleSelectedFilter = (id: number | boolean) => {
-    setSelectedFilter(id)
-  }
-
-  const handleSubmit = () => {
-    const queryParams = new URLSearchParams()
-
-    const params = {
-      startDate: calendarRange?.from
-        ? format(calendarRange.from, 'yyyy-MM-dd')
-        : '',
-      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
-      categories,
-      //ageCategoryCounts: JSON.stringify(ageCategoryCounts),
-    }
-
-    for (const [key, value] of Object.entries(params)) {
-      if (value) {
-        queryParams.append(key, value.toString())
-      }
-    }
-
-    window.location.href = `${redirectUrl}${
-      queryParams ? `?${queryParams.toString()}` : ''
-    }`
-    handleSelectedFilter(false)
-  }
-
-  useEffect(() => {
-    document.body.style.overflow = selectedFilter ? 'hidden' : 'visible'
-
-    return () => {
-      document.body.style.overflow = 'visible'
-    }
-  }, [selectedFilter])
-
-  const handleResetFilters = () => {
-    setAgeCategoryCounts({})
-    handleSubmit()
-    setSelectedFilter(false)
-  }
-
-  return {
-    selectedFilter,
-    ageCategoryCounts,
-    categories,
-    calendarRange,
-    setCalendarRange,
-    setSelectedFilter,
-    setAgeCategoryCounts,
-    setCategories,
-    handleSelectedFilter,
-    handleSubmit,
-    updateGuestsCount,
-    handleResetFilters,
-  }
-}
+import { useEffect, useState } from 'react'
+import { DateRange } from 'react-day-picker'
+import { format } from 'date-fns'
+
+import { AgeCategoryCount, AgeCategoryType } from '../FilterBarTypes'
+
+interface UseFilterBarPropsType {
+  redirectUrl: string
+}
+
+export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType) {
+  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
+  const [calendarRange, setCalendarRange] = useState<DateRange | undefined>()
+
+  const [categories, setCategories] = useState<number>(0)
+  const [ageCategoryCounts, setAgeCategoryCounts] = useState<AgeCategoryCount>(
+    {}
+  )
+
+  const updateGuestsCount = (id: number, newCount: number) => {
+    setAgeCategoryCounts((prevCounts) => ({
+      ...prevCounts,
+      [id]: newCount,
+    }))
+  }
+
+  useEffect(() => {
+    const urlSearchParams = new URLSearchParams(window.location.search)
+
+    const startDateParam = urlSearchParams.get('startDate')
+    const endDateParam = urlSearchParams.get('endDate')
+    const ageCategoryCountsParam = JSON.parse(
+      urlSearchParams.get('ageCategoryCounts') || '{}'
+    )
+    const parsedCategories = parseInt(
+      urlSearchParams.get('categories') || '0',
+      10
+    )
+
+    if (startDateParam && endDateParam) {
+      setCalendarRange({
+        from: new Date(startDateParam),
+        to: new Date(endDateParam),
+      })
+    }
+    setAgeCategoryCounts(ageCategoryCountsParam)
+    setCategories(parsedCategories)
+  }, [])
+
+  const handleSelectedFilter = (id: number | boolean) => {
+    setSelectedFilter(id)
+  }
+
+  const handleSubmit = () => {
+    const queryParams = new URLSearchParams()
+
+    const params = {
+      startDate: calendarRange?.from
+        ? format(calendarRange.from, 'yyyy-MM-dd')
+        : '',
+      endDate: calendarRange?.to ? format(calendarRange.to, 'yyyy-MM-dd') : '',
+      categories,
+      //ageCategoryCounts: JSON.stringify(ageCategoryCounts),
+    }
+
+    for (const [key, value] of Object.entries(params)) {
+      if (value) {
+        queryParams.append(key, value.toString())
+      }
+    }
+
+    window.location.href = `${redirectUrl}${
+      queryParams ? `?${queryParams.toString()}` : ''
+    }`
+    handleSelectedFilter(false)
+  }
+
+  useEffect(() => {
+    document.body.style.overflow = selectedFilter ? 'hidden' : 'visible'
+
+    return () => {
+      document.body.style.overflow = 'visible'
+    }
+  }, [selectedFilter])
+
+  const handleResetFilters = () => {
+    setAgeCategoryCounts({})
+    handleSubmit()
+    setSelectedFilter(false)
+  }
+
+  return {
+    selectedFilter,
+    ageCategoryCounts,
+    categories,
+    calendarRange,
+    setCalendarRange,
+    setSelectedFilter,
+    setAgeCategoryCounts,
+    setCategories,
+    handleSelectedFilter,
+    handleSubmit,
+    updateGuestsCount,
+    handleResetFilters,
+  }
+}

package/src/components/FilterBar/index.ts

@@ -1 +1 @@
-export { default } from "./FilterBar";
+export { default } from "./FilterBar";

package/src/i18n.ts

@@ -1,25 +1,25 @@
-import i18n from 'i18next'
-import { initReactI18next } from 'react-i18next'
-
-import enFilterBar from './locales/en/filterBar.json'
-import fiFilterBar from './locales/fi/filterBar.json'
-
-const urlParams =
-  typeof window !== 'undefined'
-    ? new URLSearchParams(window.location.search)
-    : null
-const localeFromUrl = urlParams?.get('locale') || 'fi'
-
-i18n.use(initReactI18next).init({
-  resources: {
-    en: { filterBar: enFilterBar },
-    fi: { filterBar: fiFilterBar },
-  },
-  lng: localeFromUrl,
-  fallbackLng: 'fi',
-  interpolation: {
-    escapeValue: false,
-  },
-})
-
-export default i18n
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+
+import enFilterBar from './locales/en/filterBar.json'
+import fiFilterBar from './locales/fi/filterBar.json'
+
+const urlParams =
+  typeof window !== 'undefined'
+    ? new URLSearchParams(window.location.search)
+    : null
+const localeFromUrl = urlParams?.get('locale') || 'fi'
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: { filterBar: enFilterBar },
+    fi: { filterBar: fiFilterBar },
+  },
+  lng: localeFromUrl,
+  fallbackLng: 'fi',
+  interpolation: {
+    escapeValue: false,
+  },
+})
+
+export default i18n

package/src/index.ts

@@ -1,4 +1,4 @@
-import Button from './components/Button'
-import FilterBar from './components/FilterBar'
-
-export { Button, FilterBar }
+import Button from './components/Button'
+import FilterBar from './components/FilterBar'
+
+export { Button, FilterBar }

package/src/locales/en/filterBar.json

@@ -1,21 +1,21 @@
-{
-  "calendar": {
-    "startDate": "Start date",
-    "endDate": "End date",
-    "title": "Calendar"
-  },
-  "guests": {
-    "label": "Guests",
-    "title": "Guests",
-    "subtitle": "Who's coming?",
-    "adultsLabel": "Adults",
-    "kidsLabel": "kids"
-  },
-  "categories": {
-    "label": "Categories",
-    "title": "Category"
-  },
-  "submit": {
-    "label": "Search"
-  }
+{
+  "calendar": {
+    "startDate": "Start date",
+    "endDate": "End date",
+    "title": "Calendar"
+  },
+  "guests": {
+    "label": "Guests",
+    "title": "Guests",
+    "subtitle": "Who's coming?",
+    "adultsLabel": "Adults",
+    "kidsLabel": "kids"
+  },
+  "categories": {
+    "label": "Categories",
+    "title": "Category"
+  },
+  "submit": {
+    "label": "Search"
+  }
 }

package/src/locales/fi/filterBar.json

@@ -1,21 +1,21 @@
-{
-  "calendar": {
-    "startDate": "Aloitus päivämäärä",
-    "endDate": "Päättymis päivämäärä",
-    "title": "Kalenteri"
-  },
-  "guests": {
-    "label": "Vieraat",
-    "title": "Vieraat",
-    "subtitle": "Kuka saapuu?",
-    "adultsLabel": "Aikuiset",
-    "kidsLabel": "lapset"
-  },
-  "categories": {
-    "label": "Kategoriat",
-    "title": "Kategoria"
-  },
-  "submit": {
-    "label": "Hae"
-  }
+{
+  "calendar": {
+    "startDate": "Aloitus päivämäärä",
+    "endDate": "Päättymis päivämäärä",
+    "title": "Kalenteri"
+  },
+  "guests": {
+    "label": "Vieraat",
+    "title": "Vieraat",
+    "subtitle": "Kuka saapuu?",
+    "adultsLabel": "Aikuiset",
+    "kidsLabel": "lapset"
+  },
+  "categories": {
+    "label": "Kategoriat",
+    "title": "Kategoria"
+  },
+  "submit": {
+    "label": "Hae"
+  }
 }