willba-component-library 0.1.4 → 0.1.6

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/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/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"
+  }
 }

package/src/themes/Default.css

@@ -1,52 +1,52 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
-.will-root * {
-  font-family: 'Montserrat', sans-serif;
-}
-
-.will-root {
-  
-  box-sizing: border-box;
-  font-size: 14px;
-  
-  color: #1E1E1E;
-
-  /* Pallete */
-  --will-primary: #374269;
-  --will-grey: #ABA7AF;
-  --will-white: #fff;
-  --will-onahau: #CDEEFF;
-  --will-text: #5A5959;
-
-  /* Confines */
-  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
-
-  /* Breakpoints */
-
-  --will-lg: 1140px;
-  --will-md: 960px;
-  --will-sm: 600px;
-  --will-xl: 1280px;
-  --will-xs: 0px;
-}
-
-/* Typography */
-
-.will-root h1, h2, h3, h4, h5, h6 {
- font-weight: 700;
-} 
-
-.will-root p, h1, h2, h3, h4, h5, h6, span {
-  margin: 0;
-  padding: 0;
-} 
-
-/* Overrides as themes */
-
-.will-root-kis {
-  --will-primary: #374269;
-}
-
-.will-root-paj {
-  --will-primary: #1897D8;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+
+.will-root * {
+  font-family: 'Montserrat', sans-serif;
+}
+
+.will-root {
+  
+  box-sizing: border-box;
+  font-size: 14px;
+  
+  color: #1E1E1E;
+
+  /* Pallete */
+  --will-primary: #374269;
+  --will-grey: #ABA7AF;
+  --will-white: #fff;
+  --will-onahau: #CDEEFF;
+  --will-text: #5A5959;
+
+  /* Confines */
+  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
+
+  /* Breakpoints */
+
+  --will-lg: 1140px;
+  --will-md: 960px;
+  --will-sm: 600px;
+  --will-xl: 1280px;
+  --will-xs: 0px;
+}
+
+/* Typography */
+
+.will-root h1, h2, h3, h4, h5, h6 {
+ font-weight: 700;
+} 
+
+.will-root p, h1, h2, h3, h4, h5, h6, span {
+  margin: 0;
+  padding: 0;
+} 
+
+/* Overrides as themes */
+
+.will-root-kis {
+  --will-primary: #374269;
+}
+
+.will-root-paj {
+  --will-primary: #1897D8;
 }

package/src/themes/useTheme.tsx

@@ -1,14 +1,14 @@
-type ThemeProps = {
-  vendor?: string
-}
-
-export default function useTheme({ vendor }: ThemeProps) {
-  const themeClass =
-    vendor === 'Kisakallio'
-      ? 'will-root-kis'
-      : vendor === 'Pajulahti'
-      ? 'will-root-paj'
-      : ''
-
-  return themeClass
-}
+type ThemeProps = {
+  vendor?: string
+}
+
+export default function useTheme({ vendor }: ThemeProps) {
+  const themeClass =
+    vendor === 'Kisakallio'
+      ? 'will-root-kis'
+      : vendor === 'Pajulahti'
+      ? 'will-root-paj'
+      : ''
+
+  return themeClass
+}