willba-component-library 0.0.31 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.31",
+  "version": "0.0.35",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -14,7 +14,9 @@
   "author": "Willba",
   "license": "MIT",
   "dependencies": {
-    "classnames": "^2.3.2"
+    "classnames": "^2.3.2",
+    "date-fns": "^2.30.0",
+    "react-day-picker": "^8.8.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  arrowParens: 'always',
+  semi: false,
+  singleQuote: true,
+  trailingComma: 'es5',
+}

package/src/components/FilterBar/FilterBar.css

@@ -1,16 +1,10 @@
-/* Structure ---------------------------- */
-
-.root {
-  width: 100%;
-}
-
-.search-widget {
+.filter-bar {
   box-sizing: border-box;
   max-width: 1100px;
   position: relative;
 }
 
-.search-widget-header {
+.filter-bar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -23,7 +17,7 @@
   box-shadow: 0px 6px 11px 0px #a7a4a480;
 }
 
-.search-widget-container {
+.filter-bar-container {
   background-color: #fff;
   min-height: 100px;
  
@@ -36,96 +30,8 @@
   box-shadow: 0px 6px 11px 0px #a7a4a480;
 }
 
-.search-widget-divider {
-  width: 1px;
-  margin: 0 10px;
-  height: 35px;
-  background-color: #384265;
-}
-
-.search-widget-submit-button {
-  width: auto;
-  height: auto;
-  background-color: #384265;
-  color: #fff;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  border: none;
-}
-
-.search-widget-select-button {
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-}
-
-/* Filters - Guests ---------------------------- */
-
-.search-widget-guests {
-  text-align: initial;
-}
 
-.guests-filter-container {
-  display: flex;
-  margin-top: 30px;
-}
 
-.guests-filter-inner {
-  display: flex;
-  align-items: center;
-}
 
-.guests-filter-inner:not(:last-child) {
-  margin-right: 50px;
-}
 
-.guests-filter-inner > span {
-  display: block;
-  margin-right: 20px;
-  font-weight: bold;
-}
-
-.guests-filter-inner > div {
-  display: flex;
-  align-items: center;
-}
-
-.guests-filter-inner > div > span {
-  margin: 0 10px;
-}
-
-.guests-filter-inner > div button {
-  border-radius: 50%;
-  border: none;
-  background-color: #CDEEFF;
-  width: 25px;
-  height: 25px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-}
-
-/* Filters - Categories ---------------------------- */
-
-.search-widget-categories {
-  text-align: center;
-}
-
-.categories-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.categories-filter-inner input {
-  cursor: pointer;
-  margin-right: 10px;
-}
 

package/src/components/FilterBar/FilterBar.tsx

@@ -1,55 +1,41 @@
-import React, { useState } from "react";
+import React from 'react'
 
-import Divider from "./components/Divider";
-import SelectButton from "./components/SelectButton";
-import SubmitButton from "./components/SubmitButton";
+import Divider from './components/divider/Divider'
+import SelectButton from './components/select-button/SelectButton'
+import SubmitButton from './components/submit-button/SubmitButton'
+import Calendar from './components/calendar/Calendar'
+import Guests from './components/guests/Guests'
+import Categories from './components/categories/Categories'
 
-import "./FilterBar.css";
+import useFilterBar from './hooks/useFilterBar'
 
-export default function FilterBar() {
-  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);
-  // const [startDate, setStartDate] = useState(0);
-  // const [endDate, setEndDate] = useState(0);
-  const [guestsAdults, setGuestsAdults] = useState(1);
-  const [guestsKids, setGuestsKids] = useState(0);
-  const [categories, setCategories] = useState(0);
-
-  const handleSelectedFilter = (id: any) => {
-    setSelectedFilter(id);
-  };
-
-  const handleSubmit = () => {
-    const queryParams = new URLSearchParams();
-
-    const params = {
-      // startDate,
-      // endDate,
-      guestsAdults,
-      guestsKids,
-      categories,
-    };
+import './FilterBar.css'
 
-    for (const [key, value] of Object.entries(params)) {
-      if (value) {
-        queryParams.append(key, value.toString());
-      }
-    }
-
-    const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;
-    window.location.href = url;
-    handleSelectedFilter(false);
-  };
+export default function FilterBar() {
+  const {
+    selectedFilter,
+    guestsAdults,
+    guestsKids,
+    categories,
+    calendarRange,
+    setCalendarRange,
+    setGuestsAdults,
+    setGuestsKids,
+    setCategories,
+    handleSelectedFilter,
+    handleSubmit,
+  } = useFilterBar()
 
   return (
-    <div className="search-widget">
-      <div className="search-widget-header">
+    <div className="filter-bar">
+      <div className="filter-bar-header">
         <SelectButton
-          label="Start date"
+          label={'Start date'}
           onClick={() => handleSelectedFilter(1)}
         />
         <Divider />
         <SelectButton
-          label="End date"
+          label={'End date'}
           onClick={() => handleSelectedFilter(2)}
         />
         <Divider />
@@ -63,9 +49,13 @@ export default function FilterBar() {
       </div>
 
       {selectedFilter && (
-        <div className="search-widget-container">
-          {selectedFilter === 1 && <StartDate />}
-          {selectedFilter === 2 && <EndDate />}
+        <div className="filter-bar-container">
+          {(selectedFilter === 1 || selectedFilter === 2) && (
+            <Calendar
+              calendarRange={calendarRange}
+              setCalendarRange={setCalendarRange}
+            />
+          )}
           {selectedFilter === 3 && (
             <Guests
               guestsAdults={guestsAdults}
@@ -82,87 +72,5 @@ export default function FilterBar() {
         </div>
       )}
     </div>
-  );
+  )
 }
-
-const StartDate = () => {
-  return <div>Start date</div>;
-};
-
-const EndDate = () => {
-  return <div>End date</div>;
-};
-
-const Guests = ({
-  guestsAdults,
-  guestsKids,
-  decrementAdults,
-  incrementAdults,
-  decrementKids,
-  incrementKids,
-}: any) => {
-  return (
-    <div className="search-widget-guests">
-      <h3>Guests</h3>
-      <p>Who's coming?</p>
-
-      <div className="guests-filter-container">
-        <div className="guests-filter-inner">
-          <span>Adults</span>
-          <div>
-            <button onClick={decrementAdults} disabled={guestsAdults < 1}>
-              -
-            </button>
-            <span>{guestsAdults}</span>
-            <button onClick={incrementAdults}>+</button>
-          </div>
-        </div>
-        <div className="guests-filter-inner">
-          <span>Kids</span>
-          <div>
-            <button onClick={decrementKids} disabled={guestsKids < 1}>
-              -
-            </button>
-            <span>{guestsKids}</span>
-            <button onClick={incrementKids}>+</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const Categories = ({ categories, setCategories }: any) => {
-  const categoriesPlaceholder = [
-    "Weekend",
-    "Week",
-    "Summer camp",
-    "Winter camp",
-  ];
-
-  const [selectedCategory, setSelectedCategory] = useState("");
-
-  const handleCategoryChange = (selectedCategory: any) => {
-    setSelectedCategory(selectedCategory);
-    setCategories(selectedCategory); // Update the parent component's state with the selected category
-  };
-
-  return (
-    <div className="search-widget-categories">
-      <h3>CATEGORY</h3>
-      <div className="categories-filter-inner">
-        {categoriesPlaceholder.map((itm, idx) => (
-          <div key={idx}>
-            <input
-              type="radio"
-              value={itm}
-              checked={selectedCategory === itm}
-              onChange={() => handleCategoryChange(itm)}
-            />
-            <span>{itm}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/components/FilterBar/components/calendar/Calendar.css

@@ -0,0 +1,4 @@
+.filter-bar-calendar {
+  display: flex;
+  justify-content: center;
+}

package/src/components/FilterBar/components/calendar/Calendar.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+
+import { addDays } from 'date-fns'
+import { DateRange, DayPicker } from 'react-day-picker'
+
+import 'react-day-picker/dist/style.css'
+import './Calendar.css'
+
+const currentMonth = new Date()
+
+export default function Calendar({ calendarRange, setCalendarRange }: any) {
+  const defaultCalendarSelected: DateRange = {
+    from: currentMonth,
+    to: addDays(currentMonth, 0),
+  }
+
+  useEffect(() => {
+    if (!calendarRange) setCalendarRange(defaultCalendarSelected)
+  }, [])
+
+  return (
+    <div className="filter-bar-calendar">
+      <DayPicker
+        id="test"
+        mode="range"
+        numberOfMonths={2}
+        defaultMonth={currentMonth}
+        selected={calendarRange}
+        onSelect={setCalendarRange}
+      />
+    </div>
+  )
+}

package/src/components/FilterBar/components/categories/Categories.css

@@ -0,0 +1,15 @@
+.filter-bar-categories {
+  text-align: center;
+}
+
+.categories-filter-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.categories-filter-inner input {
+  cursor: pointer;
+  margin-right: 10px;
+}

package/src/components/FilterBar/components/categories/Categories.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import './Categories.css'
+
+export default function Categories({ categories, setCategories }: any) {
+  const categoriesPlaceholder = [
+    'Weekend',
+    'Week',
+    'Summer camp',
+    'Winter camp',
+  ]
+
+  const [selectedCategory, setSelectedCategory] = useState('')
+
+  const handleCategoryChange = (selectedCategory: any) => {
+    setSelectedCategory(selectedCategory)
+    setCategories(selectedCategory)
+  }
+
+  return (
+    <div className="filter-bar-categories">
+      <h3>CATEGORY</h3>
+      <div className="categories-filter-inner">
+        {categoriesPlaceholder.map((itm, idx) => (
+          <div key={idx}>
+            <input
+              type="radio"
+              value={itm}
+              checked={selectedCategory === itm}
+              onChange={() => handleCategoryChange(itm)}
+            />
+            <span>{itm}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/FilterBar/components/divider/Divider.css

@@ -0,0 +1,6 @@
+.filter-bar-divider {
+  width: 1px;
+  margin: 0 10px;
+  height: 35px;
+  background-color: #384265;
+}

package/src/components/FilterBar/components/divider/Divider.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import './Divider.css'
+
+export default function Divider() {
+  return <div className="filter-bar-divider" />
+}

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

@@ -0,0 +1,44 @@
+.filter-bar-guests {
+  text-align: initial;
+}
+
+.guests-filter-container {
+  display: flex;
+  margin-top: 30px;
+}
+
+.guests-filter-inner {
+  display: flex;
+  align-items: center;
+}
+
+.guests-filter-inner:not(:last-child) {
+  margin-right: 50px;
+}
+
+.guests-filter-inner > span {
+  display: block;
+  margin-right: 20px;
+  font-weight: bold;
+}
+
+.guests-filter-inner > div {
+  display: flex;
+  align-items: center;
+}
+
+.guests-filter-inner > div > span {
+  margin: 0 10px;
+}
+
+.guests-filter-inner > div button {
+  border-radius: 50%;
+  border: none;
+  background-color: #CDEEFF;
+  width: 25px;
+  height: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+}

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

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import './Guests.css'
+
+export default function Guests({
+  guestsAdults,
+  guestsKids,
+  decrementAdults,
+  incrementAdults,
+  decrementKids,
+  incrementKids,
+}: any) {
+  return (
+    <div className="filter-bar-guests">
+      <h3>Guests</h3>
+      <p>Who's coming?</p>
+
+      <div className="guests-filter-container">
+        <div className="guests-filter-inner">
+          <span>Adults</span>
+          <div>
+            <button onClick={decrementAdults} disabled={guestsAdults < 1}>
+              -
+            </button>
+            <span>{guestsAdults}</span>
+            <button onClick={incrementAdults}>+</button>
+          </div>
+        </div>
+        <div className="guests-filter-inner">
+          <span>Kids</span>
+          <div>
+            <button onClick={decrementKids} disabled={guestsKids < 1}>
+              -
+            </button>
+            <span>{guestsKids}</span>
+            <button onClick={incrementKids}>+</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+.filter-bar-select-button {
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import './SelectButton.css'
+
+export default function SelectButton({ label, onClick }: any) {
+  return (
+    <button className="filter-bar-select-button" onClick={onClick}>
+      {label}
+    </button>
+  )
+}

package/src/components/FilterBar/components/submit-button/SubmitButton.css

@@ -0,0 +1,11 @@
+.filter-bar-submit-button {
+  width: auto;
+  height: auto;
+  background-color: #384265;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  border: none;
+  white-space: nowrap;
+}

package/src/components/FilterBar/components/submit-button/SubmitButton.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import './SubmitButton.css'
+
+export default function SubmitButton({ onClick }: any) {
+  return (
+    <button className="filter-bar-submit-button" onClick={onClick}>
+      Search
+    </button>
+  )
+}

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

@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import { DateRange } from 'react-day-picker'
+import { addDays, format } from 'date-fns'
+
+export default function useFilterBar() {
+  const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false)
+  const [calendarRange, setCalendarRange] = useState<DateRange>()
+  const [guestsAdults, setGuestsAdults] = useState(1)
+  const [guestsKids, setGuestsKids] = useState(0)
+  const [categories, setCategories] = useState(0)
+
+  const handleSelectedFilter = (id: any) => {
+    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') : '',
+      guestsAdults,
+      guestsKids,
+      categories,
+    }
+
+    for (const [key, value] of Object.entries(params)) {
+      if (value) {
+        queryParams.append(key, value.toString())
+      }
+    }
+
+    const url = `http://localhost:4000/en/events/?${queryParams.toString()}`
+    window.location.href = url
+    handleSelectedFilter(false)
+  }
+
+  return {
+    selectedFilter,
+    guestsAdults,
+    guestsKids,
+    categories,
+    calendarRange,
+    setCalendarRange,
+    setSelectedFilter,
+    setGuestsAdults,
+    setGuestsKids,
+    setCategories,
+    handleSelectedFilter,
+    handleSubmit,
+  }
+}

package/src/components/FilterBar/components/Callendar.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function Calendar() {
-  return <div>calendar</div>;
-}

package/src/components/FilterBar/components/Divider.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default function Divider() {
-  return <div className="search-widget-divider" />;
-}

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

@@ -1,9 +0,0 @@
-import React from "react";
-
-export default function SelectButton({ label, onClick }: any) {
-  return (
-    <button className="search-widget-select-button" onClick={onClick}>
-      {label}
-    </button>
-  );
-}

package/src/components/FilterBar/components/SubmitButton.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-
-export default function SubmitButton({ onClick }: any) {
-  return (
-    <button className="search-widget-submit-button" onClick={onClick}>
-      Apply filters
-    </button>
-  );
-}