willba-component-library 0.0.28 → 0.0.33

package/src/components/FilterBar/FilterBar.tsx

@@ -1,43 +1,33 @@
-import React, { useState } from "react";
-import "./FilterBar.css";
+import React, { useState } from 'react'
 
-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(0);
-  const [guestsKids, setGuestsKids] = useState(0);
-  const [categories, setCategories] = useState(0);
-
-  const handleSelectedFilter = (id: any) => {
-    setSelectedFilter(id);
-  };
+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'
 
-  const handleSubmit = () => {
-    const queryParams = new URLSearchParams();
+import useFilterBar from './hooks/useFilterBar'
 
-    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,
+    setSelectedFilter,
+    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"
           onClick={() => handleSelectedFilter(1)}
@@ -58,9 +48,9 @@ export default function FilterBar() {
       </div>
 
       {selectedFilter && (
-        <div className="search-widget-container">
-          {selectedFilter === 1 && <StartDate />}
-          {selectedFilter === 2 && <EndDate />}
+        <div className="filter-bar-container">
+          {selectedFilter === 1 && <Calendar />}
+          {selectedFilter === 2 && <Calendar />}
           {selectedFilter === 3 && (
             <Guests
               guestsAdults={guestsAdults}
@@ -77,107 +67,5 @@ export default function FilterBar() {
         </div>
       )}
     </div>
-  );
+  )
 }
-
-const Divider = () => {
-  return <div className="search-widget-divider" />;
-};
-
-const SubmitButton = ({ onClick }: any) => {
-  return (
-    <button className="search-widget-submit-button" onClick={onClick}>
-      Apply filters
-    </button>
-  );
-};
-
-const SelectButton = ({ label, onClick }: any) => {
-  return (
-    <button className="search-widget-select-button" onClick={onClick}>
-      {label}
-    </button>
-  );
-};
-
-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.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+
+import { addDays, format } from "date-fns";
+import { DateRange, DayPicker } from "react-day-picker";
+
+import "react-day-picker/dist/style.css";
+
+const pastMonth = new Date(2020, 10, 15);
+
+export default function Calendar() {
+  const defaultSelected: DateRange = {
+    from: pastMonth,
+    to: addDays(pastMonth, 4),
+  };
+  const [range, setRange] = useState<DateRange | undefined>(defaultSelected);
+
+  let footer = <p>Please pick the first day.</p>;
+  if (range?.from) {
+    if (!range.to) {
+      footer = <p>{format(range.from, "PPP")}</p>;
+    } else if (range.to) {
+      footer = (
+        <p>
+          {format(range.from, "PPP")}–{format(range.to, "PPP")}
+        </p>
+      );
+    }
+  }
+
+  return (
+    <DayPicker
+      id="test"
+      mode="range"
+      numberOfMonths={2}
+      defaultMonth={pastMonth}
+      selected={range}
+      footer={footer}
+      onSelect={setRange}
+    />
+  );
+}

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="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>
+  )
+}

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,49 @@
+import React, { useState } from 'react'
+
+export default function useFilterBar() {
+  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,
+    }
+
+    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,
+    setSelectedFilter,
+    setGuestsAdults,
+    setGuestsKids,
+    setCategories,
+    handleSelectedFilter,
+    handleSubmit,
+  }
+}

package/src/components/FilterBar/index.ts

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

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/stories/Button.stories.ts

@@ -1,50 +1,50 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};