willba-component-library 0.0.25 → 0.0.27

package/lib/components/FilterBar/FilterBar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./FilterBar.css";
+export default function FilterBar(): React.JSX.Element;

package/lib/components/FilterBar/FilterBar.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import FilterBar from "./FilterBar";
+declare const meta: Meta<typeof FilterBar>;
+export default meta;
+type Story = StoryObj<typeof FilterBar>;
+export declare const Primary: Story;

package/lib/components/FilterBar/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "description": "A stroybook 6 with TypeScript demo",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/components/FilterBar/FilterBar.css

@@ -0,0 +1,131 @@
+/* Structure ---------------------------- */
+
+.root {
+  width: 100%;
+}
+
+.search-widget {
+  box-sizing: border-box;
+  max-width: 1100px;
+  position: relative;
+}
+
+.search-widget-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  position: relative;
+  z-index: 222;
+  
+  border-radius: 40px;
+  background-color: #ecf1f4;
+  box-shadow: 0px 6px 11px 0px #a7a4a480;
+}
+
+.search-widget-container {
+  background-color: #ecf1f4;
+  min-height: 100px;
+ 
+  padding: 90px 40px 30px 40px;
+  position: absolute;
+  top: 0;
+  z-index: 111;
+  border-radius: 40px;
+  width: -webkit-fill-available;
+  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.stories.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import FilterBar from "./FilterBar";
+
+// Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
+const meta: Meta<typeof FilterBar> = {
+  title: "Components/FilterBar",
+  component: FilterBar,
+};
+
+export default meta;
+
+// The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
+type Story = StoryObj<typeof FilterBar>;
+
+export const Primary: Story = {
+  args: {
+    label: "Primary 😃",
+  },
+};

package/src/components/FilterBar/FilterBar.tsx

@@ -0,0 +1,183 @@
+import React, { useState } from "react";
+import "./FilterBar.css";
+
+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);
+  };
+
+  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 (
+    <div className="search-widget">
+      <div className="search-widget-header">
+        <SelectButton
+          label="Start date"
+          onClick={() => handleSelectedFilter(1)}
+        />
+        <Divider />
+        <SelectButton
+          label="End date"
+          onClick={() => handleSelectedFilter(2)}
+        />
+        <Divider />
+        <SelectButton label="Guests" onClick={() => handleSelectedFilter(3)} />
+        <Divider />
+        <SelectButton
+          label="Categories"
+          onClick={() => handleSelectedFilter(4)}
+        />
+        <SubmitButton onClick={handleSubmit} />
+      </div>
+
+      {selectedFilter && (
+        <div className="search-widget-container">
+          {selectedFilter === 1 && <StartDate />}
+          {selectedFilter === 2 && <EndDate />}
+          {selectedFilter === 3 && (
+            <Guests
+              guestsAdults={guestsAdults}
+              guestsKids={guestsKids}
+              decrementAdults={() => setGuestsAdults(guestsAdults - 1)}
+              incrementAdults={() => setGuestsAdults(guestsAdults + 1)}
+              decrementKids={() => setGuestsKids(guestsKids - 1)}
+              incrementKids={() => setGuestsKids(guestsKids + 1)}
+            />
+          )}
+          {selectedFilter === 4 && (
+            <Categories categories={categories} setCategories={setCategories} />
+          )}
+        </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/index.ts

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