willba-component-library 0.0.25 → 0.0.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/lib/components/FilterBar/FilterBar.d.ts +3 -0
  2. package/lib/components/FilterBar/FilterBar.stories.d.ts +6 -0
  3. package/lib/components/FilterBar/index.d.ts +1 -0
  4. package/lib/index.d.ts +3 -1
  5. package/lib/index.esm.js +107 -3
  6. package/lib/index.esm.js.map +1 -1
  7. package/lib/index.js +107 -2
  8. package/lib/index.js.map +1 -1
  9. package/lib/index.umd.js +107 -2
  10. package/lib/index.umd.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components/FilterBar/FilterBar.css +131 -0
  13. package/src/components/FilterBar/FilterBar.stories.tsx +20 -0
  14. package/src/components/FilterBar/FilterBar.tsx +183 -0
  15. package/src/components/FilterBar/index.ts +1 -0
  16. package/src/index.ts +2 -1
package/lib/components/FilterBar/FilterBar.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import "./FilterBar.css";
3
+ export default function FilterBar(): React.JSX.Element;
package/lib/components/FilterBar/FilterBar.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import FilterBar from "./FilterBar";
3
+ declare const meta: Meta<typeof FilterBar>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof FilterBar>;
6
+ export declare const Primary: Story;
package/lib/components/FilterBar/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from "./FilterBar";
package/lib/index.d.ts CHANGED
@@ -27,4 +27,6 @@ interface ButtonProps {
27
27
  */
28
28
  declare const Button: ({ type, textColor, size, onClick, label, }: ButtonProps) => React.JSX.Element;
29
29
 
30
- export { Button };
30
+ declare function FilterBar(): React.JSX.Element;
31
+
32
+ export { Button, FilterBar };
package/lib/index.esm.js CHANGED
@@ -93,8 +93,8 @@ function styleInject(css, ref) {
93
93
  }
94
94
  }
95
95
 
96
- var css_248z = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
97
- styleInject(css_248z);
96
+ var css_248z$1 = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
97
+ styleInject(css_248z$1);
98
98
 
99
99
  /**
100
100
  * Primary UI component for user interaction
@@ -105,5 +105,109 @@ var Button = function (_a) {
105
105
  return (React.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
106
106
  };
107
107
 
108
- export { Button };
108
+ var css_248z = "/* Structure ---------------------------- */\r\n\r\n.root {\r\n width: 100%;\r\n}\r\n\r\n.search-widget {\r\n box-sizing: border-box;\r\n max-width: 1100px;\r\n position: relative;\r\n}\r\n\r\n.search-widget-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 222;\r\n \r\n border-radius: 40px;\r\n background-color: #ecf1f4;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-container {\r\n background-color: #ecf1f4;\r\n min-height: 100px;\r\n \r\n padding: 90px 40px 30px 40px;\r\n position: absolute;\r\n top: 0;\r\n z-index: 111;\r\n border-radius: 40px;\r\n width: -webkit-fill-available;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-divider {\r\n width: 1px;\r\n margin: 0 10px;\r\n height: 35px;\r\n background-color: #384265;\r\n}\r\n\r\n.search-widget-submit-button {\r\n width: auto;\r\n height: auto;\r\n background-color: #384265;\r\n color: #fff;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n border: none;\r\n}\r\n\r\n.search-widget-select-button {\r\n width: auto;\r\n height: auto;\r\n background-color: transparent;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n}\r\n\r\n/* Filters - Guests ---------------------------- */\r\n\r\n.search-widget-guests {\r\n text-align: initial;\r\n}\r\n\r\n.guests-filter-container {\r\n display: flex;\r\n margin-top: 30px;\r\n}\r\n\r\n.guests-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.guests-filter-inner:not(:last-child) {\r\n margin-right: 50px;\r\n}\r\n\r\n.guests-filter-inner > span {\r\n display: block;\r\n margin-right: 20px;\r\n font-weight: bold;\r\n}\r\n\r\n.guests-filter-inner > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.guests-filter-inner > div > span {\r\n margin: 0 10px;\r\n}\r\n\r\n.guests-filter-inner > div button {\r\n border-radius: 50%;\r\n border: none;\r\n background-color: #CDEEFF;\r\n width: 25px;\r\n height: 25px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 20px;\r\n}\r\n\r\n/* Filters - Categories ---------------------------- */\r\n\r\n.search-widget-categories {\r\n text-align: center;\r\n}\r\n\r\n.categories-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n}\r\n\r\n.categories-filter-inner input {\r\n cursor: pointer;\r\n margin-right: 10px;\r\n}\r\n\r\n";
109
+ styleInject(css_248z);
110
+
111
+ function FilterBar() {
112
+ var _a = useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
113
+ // const [startDate, setStartDate] = useState(0);
114
+ // const [endDate, setEndDate] = useState(0);
115
+ var _b = useState(0), guestsAdults = _b[0], setGuestsAdults = _b[1];
116
+ var _c = useState(0), guestsKids = _c[0], setGuestsKids = _c[1];
117
+ var _d = useState(0), categories = _d[0], setCategories = _d[1];
118
+ var handleSelectedFilter = function (id) {
119
+ setSelectedFilter(id);
120
+ };
121
+ var handleSubmit = function () {
122
+ var queryParams = new URLSearchParams();
123
+ var params = {
124
+ // startDate,
125
+ // endDate,
126
+ guestsAdults: guestsAdults,
127
+ guestsKids: guestsKids,
128
+ categories: categories,
129
+ };
130
+ for (var _i = 0, _a = Object.entries(params); _i < _a.length; _i++) {
131
+ var _b = _a[_i], key = _b[0], value = _b[1];
132
+ if (value) {
133
+ queryParams.append(key, value.toString());
134
+ }
135
+ }
136
+ var url = "http://localhost:4000/en/events/?".concat(queryParams.toString());
137
+ window.location.href = url;
138
+ handleSelectedFilter(false);
139
+ };
140
+ return (React.createElement("div", { className: "search-widget" },
141
+ React.createElement("div", { className: "search-widget-header" },
142
+ React.createElement(SelectButton, { label: "Start date", onClick: function () { return handleSelectedFilter(1); } }),
143
+ React.createElement(Divider, null),
144
+ React.createElement(SelectButton, { label: "End date", onClick: function () { return handleSelectedFilter(2); } }),
145
+ React.createElement(Divider, null),
146
+ React.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
147
+ React.createElement(Divider, null),
148
+ React.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
149
+ React.createElement(SubmitButton, { onClick: handleSubmit })),
150
+ selectedFilter && (React.createElement("div", { className: "search-widget-container" },
151
+ selectedFilter === 1 && React.createElement(StartDate, null),
152
+ selectedFilter === 2 && React.createElement(EndDate, null),
153
+ selectedFilter === 3 && (React.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
154
+ selectedFilter === 4 && (React.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
155
+ }
156
+ var Divider = function () {
157
+ return React.createElement("div", { className: "search-widget-divider" });
158
+ };
159
+ var SubmitButton = function (_a) {
160
+ var onClick = _a.onClick;
161
+ return (React.createElement("button", { className: "search-widget-submit-button", onClick: onClick }, "Apply filters"));
162
+ };
163
+ var SelectButton = function (_a) {
164
+ var label = _a.label, onClick = _a.onClick;
165
+ return (React.createElement("button", { className: "search-widget-select-button", onClick: onClick }, label));
166
+ };
167
+ var StartDate = function () {
168
+ return React.createElement("div", null, "Start date");
169
+ };
170
+ var EndDate = function () {
171
+ return React.createElement("div", null, "End date");
172
+ };
173
+ var Guests = function (_a) {
174
+ var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
175
+ return (React.createElement("div", { className: "search-widget-guests" },
176
+ React.createElement("h3", null, "Guests"),
177
+ React.createElement("p", null, "Who's coming?"),
178
+ React.createElement("div", { className: "guests-filter-container" },
179
+ React.createElement("div", { className: "guests-filter-inner" },
180
+ React.createElement("span", null, "Adults"),
181
+ React.createElement("div", null,
182
+ React.createElement("button", { onClick: decrementAdults, disabled: guestsAdults < 1 }, "-"),
183
+ React.createElement("span", null, guestsAdults),
184
+ React.createElement("button", { onClick: incrementAdults }, "+"))),
185
+ React.createElement("div", { className: "guests-filter-inner" },
186
+ React.createElement("span", null, "Kids"),
187
+ React.createElement("div", null,
188
+ React.createElement("button", { onClick: decrementKids, disabled: guestsKids < 1 }, "-"),
189
+ React.createElement("span", null, guestsKids),
190
+ React.createElement("button", { onClick: incrementKids }, "+"))))));
191
+ };
192
+ var Categories = function (_a) {
193
+ _a.categories; var setCategories = _a.setCategories;
194
+ var categoriesPlaceholder = [
195
+ "Weekend",
196
+ "Week",
197
+ "Summer camp",
198
+ "Winter camp",
199
+ ];
200
+ var _b = useState(""), selectedCategory = _b[0], setSelectedCategory = _b[1];
201
+ var handleCategoryChange = function (selectedCategory) {
202
+ setSelectedCategory(selectedCategory);
203
+ setCategories(selectedCategory); // Update the parent component's state with the selected category
204
+ };
205
+ return (React.createElement("div", { className: "search-widget-categories" },
206
+ React.createElement("h3", null, "CATEGORY"),
207
+ React.createElement("div", { className: "categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
208
+ React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
209
+ React.createElement("span", null, itm))); }))));
210
+ };
211
+
212
+ export { Button, FilterBar };
109
213
  //# sourceMappingURL=index.esm.js.map
package/lib/index.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n /**\n * Is this the principal call to action on the page?\n */\n type?: \"primary\" | \"secondary\";\n /**\n * What background color to use\n */\n textColor?: string;\n /**\n * How large should the button be?\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n type = \"primary\",\n textColor,\n size = \"medium\",\n onClick,\n label,\n}: ButtonProps) => {\n const [theState, setTheState] = useState(4);\n\n return (\n <button\n type=\"button\"\n className={classNames(\n \"storybook-button\",\n `storybook-button--${size}`,\n `storybook-button--${type}`\n )}\n style={textColor ? { color: textColor } : {}}\n onClick={onClick}\n >\n {`${label} ${theState}`}\n </button>\n );\n};\n\nexport default Button;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAKA;AACA;AACA,CAAA,CAAC,YAAY;AAEb;AACA,EAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAEhC;EACC,SAAS,UAAU,GAAG;AACvB,GAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;AACA,GAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC7C,IAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;AAC1B,IAAG,IAAI,CAAC,GAAG,EAAE,SAAS;AACtB;AACA,IAAG,IAAI,OAAO,GAAG,OAAO,GAAG,CAAC;AAC5B;IACG,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;AACrD,KAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAClB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;AAClC,KAAI,IAAI,GAAG,CAAC,MAAM,EAAE;MACf,IAAI,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;MACxC,IAAI,KAAK,EAAE;AAChB,OAAM,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;OACpB;MACD;AACL,KAAI,MAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;KAChC,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;MACrG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;AAClC,MAAK,SAAS;MACT;AACL;AACA,KAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;AACzB,MAAK,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;AAC5C,OAAM,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAClB;MACD;KACD;IACD;AACH;AACA,GAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GACzB;AACF;EACC,IAAqC,MAAM,CAAC,OAAO,EAAE;AACtD,GAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;GAChC,MAAA,CAAA,OAAA,GAAiB,UAAU,CAAC;AAC9B,GAAE,MAKM;AACR,GAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;GAC/B;AACF,EAAC,EAAE,EAAA;;;;;;AC3DH,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;;ACEA;;AAEG;AACG,IAAA,MAAM,GAAG,UAAC,EAMF,EAAA;QALZ,EAAgB,GAAA,EAAA,CAAA,IAAA,EAAhB,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAChB,SAAS,eAAA,EACT,EAAA,GAAA,EAAA,CAAA,IAAe,EAAf,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;IAEC,IAAA,EAAA,GAA0B,QAAQ,CAAC,CAAC,CAAC,CAApC,CAAA,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAa,EAAA,CAAA,CAAA,EAAgB;IAE5C,QACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,kBAAkB,EAClB,oBAAqB,CAAA,MAAA,CAAA,IAAI,CAAE,EAC3B,oBAAA,CAAA,MAAA,CAAqB,IAAI,CAAE,CAC5B,EACD,KAAK,EAAE,SAAS,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,EAC5C,OAAO,EAAE,OAAO,IAEf,EAAG,CAAA,MAAA,CAAA,KAAK,cAAI,QAAQ,CAAE,CAChB,EACT;AACJ;;;;","x_google_ignoreList":[0,1]}
1
+ {"version":3,"file":"index.esm.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/FilterBar/FilterBar.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n /**\n * Is this the principal call to action on the page?\n */\n type?: \"primary\" | \"secondary\";\n /**\n * What background color to use\n */\n textColor?: string;\n /**\n * How large should the button be?\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n type = \"primary\",\n textColor,\n size = \"medium\",\n onClick,\n label,\n}: ButtonProps) => {\n const [theState, setTheState] = useState(4);\n\n return (\n <button\n type=\"button\"\n className={classNames(\n \"storybook-button\",\n `storybook-button--${size}`,\n `storybook-button--${type}`\n )}\n style={textColor ? { color: textColor } : {}}\n onClick={onClick}\n >\n {`${label} ${theState}`}\n </button>\n );\n};\n\nexport default Button;\n","import React, { useState } from \"react\";\r\nimport \"./FilterBar.css\";\r\n\r\nexport default function FilterBar() {\r\n const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);\r\n // const [startDate, setStartDate] = useState(0);\r\n // const [endDate, setEndDate] = useState(0);\r\n const [guestsAdults, setGuestsAdults] = useState(0);\r\n const [guestsKids, setGuestsKids] = useState(0);\r\n const [categories, setCategories] = useState(0);\r\n\r\n const handleSelectedFilter = (id: any) => {\r\n setSelectedFilter(id);\r\n };\r\n\r\n const handleSubmit = () => {\r\n const queryParams = new URLSearchParams();\r\n\r\n const params = {\r\n // startDate,\r\n // endDate,\r\n guestsAdults,\r\n guestsKids,\r\n categories,\r\n };\r\n\r\n for (const [key, value] of Object.entries(params)) {\r\n if (value) {\r\n queryParams.append(key, value.toString());\r\n }\r\n }\r\n\r\n const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;\r\n window.location.href = url;\r\n handleSelectedFilter(false);\r\n };\r\n\r\n return (\r\n <div className=\"search-widget\">\r\n <div className=\"search-widget-header\">\r\n <SelectButton\r\n label=\"Start date\"\r\n onClick={() => handleSelectedFilter(1)}\r\n />\r\n <Divider />\r\n <SelectButton\r\n label=\"End date\"\r\n onClick={() => handleSelectedFilter(2)}\r\n />\r\n <Divider />\r\n <SelectButton label=\"Guests\" onClick={() => handleSelectedFilter(3)} />\r\n <Divider />\r\n <SelectButton\r\n label=\"Categories\"\r\n onClick={() => handleSelectedFilter(4)}\r\n />\r\n <SubmitButton onClick={handleSubmit} />\r\n </div>\r\n\r\n {selectedFilter && (\r\n <div className=\"search-widget-container\">\r\n {selectedFilter === 1 && <StartDate />}\r\n {selectedFilter === 2 && <EndDate />}\r\n {selectedFilter === 3 && (\r\n <Guests\r\n guestsAdults={guestsAdults}\r\n guestsKids={guestsKids}\r\n decrementAdults={() => setGuestsAdults(guestsAdults - 1)}\r\n incrementAdults={() => setGuestsAdults(guestsAdults + 1)}\r\n decrementKids={() => setGuestsKids(guestsKids - 1)}\r\n incrementKids={() => setGuestsKids(guestsKids + 1)}\r\n />\r\n )}\r\n {selectedFilter === 4 && (\r\n <Categories categories={categories} setCategories={setCategories} />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nconst Divider = () => {\r\n return <div className=\"search-widget-divider\" />;\r\n};\r\n\r\nconst SubmitButton = ({ onClick }: any) => {\r\n return (\r\n <button className=\"search-widget-submit-button\" onClick={onClick}>\r\n Apply filters\r\n </button>\r\n );\r\n};\r\n\r\nconst SelectButton = ({ label, onClick }: any) => {\r\n return (\r\n <button className=\"search-widget-select-button\" onClick={onClick}>\r\n {label}\r\n </button>\r\n );\r\n};\r\n\r\nconst StartDate = () => {\r\n return <div>Start date</div>;\r\n};\r\n\r\nconst EndDate = () => {\r\n return <div>End date</div>;\r\n};\r\n\r\nconst Guests = ({\r\n guestsAdults,\r\n guestsKids,\r\n decrementAdults,\r\n incrementAdults,\r\n decrementKids,\r\n incrementKids,\r\n}: any) => {\r\n return (\r\n <div className=\"search-widget-guests\">\r\n <h3>Guests</h3>\r\n <p>Who's coming?</p>\r\n\r\n <div className=\"guests-filter-container\">\r\n <div className=\"guests-filter-inner\">\r\n <span>Adults</span>\r\n <div>\r\n <button onClick={decrementAdults} disabled={guestsAdults < 1}>\r\n -\r\n </button>\r\n <span>{guestsAdults}</span>\r\n <button onClick={incrementAdults}>+</button>\r\n </div>\r\n </div>\r\n <div className=\"guests-filter-inner\">\r\n <span>Kids</span>\r\n <div>\r\n <button onClick={decrementKids} disabled={guestsKids < 1}>\r\n -\r\n </button>\r\n <span>{guestsKids}</span>\r\n <button onClick={incrementKids}>+</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst Categories = ({ categories, setCategories }: any) => {\r\n const categoriesPlaceholder = [\r\n \"Weekend\",\r\n \"Week\",\r\n \"Summer camp\",\r\n \"Winter camp\",\r\n ];\r\n\r\n const [selectedCategory, setSelectedCategory] = useState(\"\");\r\n\r\n const handleCategoryChange = (selectedCategory: any) => {\r\n setSelectedCategory(selectedCategory);\r\n setCategories(selectedCategory); // Update the parent component's state with the selected category\r\n };\r\n\r\n return (\r\n <div className=\"search-widget-categories\">\r\n <h3>CATEGORY</h3>\r\n <div className=\"categories-filter-inner\">\r\n {categoriesPlaceholder.map((itm, idx) => (\r\n <div key={idx}>\r\n <input\r\n type=\"radio\"\r\n value={itm}\r\n checked={selectedCategory === itm}\r\n onChange={() => handleCategoryChange(itm)}\r\n />\r\n <span>{itm}</span>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":[],"mappings":"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","x_google_ignoreList":[0,1]}
package/lib/index.js CHANGED
@@ -95,8 +95,8 @@ function styleInject(css, ref) {
95
95
  }
96
96
  }
97
97
 
98
- var css_248z = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
99
- styleInject(css_248z);
98
+ var css_248z$1 = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
99
+ styleInject(css_248z$1);
100
100
 
101
101
  /**
102
102
  * Primary UI component for user interaction
@@ -107,5 +107,110 @@ var Button = function (_a) {
107
107
  return (React.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
108
108
  };
109
109
 
110
+ var css_248z = "/* Structure ---------------------------- */\r\n\r\n.root {\r\n width: 100%;\r\n}\r\n\r\n.search-widget {\r\n box-sizing: border-box;\r\n max-width: 1100px;\r\n position: relative;\r\n}\r\n\r\n.search-widget-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 222;\r\n \r\n border-radius: 40px;\r\n background-color: #ecf1f4;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-container {\r\n background-color: #ecf1f4;\r\n min-height: 100px;\r\n \r\n padding: 90px 40px 30px 40px;\r\n position: absolute;\r\n top: 0;\r\n z-index: 111;\r\n border-radius: 40px;\r\n width: -webkit-fill-available;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-divider {\r\n width: 1px;\r\n margin: 0 10px;\r\n height: 35px;\r\n background-color: #384265;\r\n}\r\n\r\n.search-widget-submit-button {\r\n width: auto;\r\n height: auto;\r\n background-color: #384265;\r\n color: #fff;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n border: none;\r\n}\r\n\r\n.search-widget-select-button {\r\n width: auto;\r\n height: auto;\r\n background-color: transparent;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n}\r\n\r\n/* Filters - Guests ---------------------------- */\r\n\r\n.search-widget-guests {\r\n text-align: initial;\r\n}\r\n\r\n.guests-filter-container {\r\n display: flex;\r\n margin-top: 30px;\r\n}\r\n\r\n.guests-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.guests-filter-inner:not(:last-child) {\r\n margin-right: 50px;\r\n}\r\n\r\n.guests-filter-inner > span {\r\n display: block;\r\n margin-right: 20px;\r\n font-weight: bold;\r\n}\r\n\r\n.guests-filter-inner > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.guests-filter-inner > div > span {\r\n margin: 0 10px;\r\n}\r\n\r\n.guests-filter-inner > div button {\r\n border-radius: 50%;\r\n border: none;\r\n background-color: #CDEEFF;\r\n width: 25px;\r\n height: 25px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 20px;\r\n}\r\n\r\n/* Filters - Categories ---------------------------- */\r\n\r\n.search-widget-categories {\r\n text-align: center;\r\n}\r\n\r\n.categories-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n}\r\n\r\n.categories-filter-inner input {\r\n cursor: pointer;\r\n margin-right: 10px;\r\n}\r\n\r\n";
111
+ styleInject(css_248z);
112
+
113
+ function FilterBar() {
114
+ var _a = React.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
115
+ // const [startDate, setStartDate] = useState(0);
116
+ // const [endDate, setEndDate] = useState(0);
117
+ var _b = React.useState(0), guestsAdults = _b[0], setGuestsAdults = _b[1];
118
+ var _c = React.useState(0), guestsKids = _c[0], setGuestsKids = _c[1];
119
+ var _d = React.useState(0), categories = _d[0], setCategories = _d[1];
120
+ var handleSelectedFilter = function (id) {
121
+ setSelectedFilter(id);
122
+ };
123
+ var handleSubmit = function () {
124
+ var queryParams = new URLSearchParams();
125
+ var params = {
126
+ // startDate,
127
+ // endDate,
128
+ guestsAdults: guestsAdults,
129
+ guestsKids: guestsKids,
130
+ categories: categories,
131
+ };
132
+ for (var _i = 0, _a = Object.entries(params); _i < _a.length; _i++) {
133
+ var _b = _a[_i], key = _b[0], value = _b[1];
134
+ if (value) {
135
+ queryParams.append(key, value.toString());
136
+ }
137
+ }
138
+ var url = "http://localhost:4000/en/events/?".concat(queryParams.toString());
139
+ window.location.href = url;
140
+ handleSelectedFilter(false);
141
+ };
142
+ return (React.createElement("div", { className: "search-widget" },
143
+ React.createElement("div", { className: "search-widget-header" },
144
+ React.createElement(SelectButton, { label: "Start date", onClick: function () { return handleSelectedFilter(1); } }),
145
+ React.createElement(Divider, null),
146
+ React.createElement(SelectButton, { label: "End date", onClick: function () { return handleSelectedFilter(2); } }),
147
+ React.createElement(Divider, null),
148
+ React.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
149
+ React.createElement(Divider, null),
150
+ React.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
151
+ React.createElement(SubmitButton, { onClick: handleSubmit })),
152
+ selectedFilter && (React.createElement("div", { className: "search-widget-container" },
153
+ selectedFilter === 1 && React.createElement(StartDate, null),
154
+ selectedFilter === 2 && React.createElement(EndDate, null),
155
+ selectedFilter === 3 && (React.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
156
+ selectedFilter === 4 && (React.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
157
+ }
158
+ var Divider = function () {
159
+ return React.createElement("div", { className: "search-widget-divider" });
160
+ };
161
+ var SubmitButton = function (_a) {
162
+ var onClick = _a.onClick;
163
+ return (React.createElement("button", { className: "search-widget-submit-button", onClick: onClick }, "Apply filters"));
164
+ };
165
+ var SelectButton = function (_a) {
166
+ var label = _a.label, onClick = _a.onClick;
167
+ return (React.createElement("button", { className: "search-widget-select-button", onClick: onClick }, label));
168
+ };
169
+ var StartDate = function () {
170
+ return React.createElement("div", null, "Start date");
171
+ };
172
+ var EndDate = function () {
173
+ return React.createElement("div", null, "End date");
174
+ };
175
+ var Guests = function (_a) {
176
+ var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
177
+ return (React.createElement("div", { className: "search-widget-guests" },
178
+ React.createElement("h3", null, "Guests"),
179
+ React.createElement("p", null, "Who's coming?"),
180
+ React.createElement("div", { className: "guests-filter-container" },
181
+ React.createElement("div", { className: "guests-filter-inner" },
182
+ React.createElement("span", null, "Adults"),
183
+ React.createElement("div", null,
184
+ React.createElement("button", { onClick: decrementAdults, disabled: guestsAdults < 1 }, "-"),
185
+ React.createElement("span", null, guestsAdults),
186
+ React.createElement("button", { onClick: incrementAdults }, "+"))),
187
+ React.createElement("div", { className: "guests-filter-inner" },
188
+ React.createElement("span", null, "Kids"),
189
+ React.createElement("div", null,
190
+ React.createElement("button", { onClick: decrementKids, disabled: guestsKids < 1 }, "-"),
191
+ React.createElement("span", null, guestsKids),
192
+ React.createElement("button", { onClick: incrementKids }, "+"))))));
193
+ };
194
+ var Categories = function (_a) {
195
+ _a.categories; var setCategories = _a.setCategories;
196
+ var categoriesPlaceholder = [
197
+ "Weekend",
198
+ "Week",
199
+ "Summer camp",
200
+ "Winter camp",
201
+ ];
202
+ var _b = React.useState(""), selectedCategory = _b[0], setSelectedCategory = _b[1];
203
+ var handleCategoryChange = function (selectedCategory) {
204
+ setSelectedCategory(selectedCategory);
205
+ setCategories(selectedCategory); // Update the parent component's state with the selected category
206
+ };
207
+ return (React.createElement("div", { className: "search-widget-categories" },
208
+ React.createElement("h3", null, "CATEGORY"),
209
+ React.createElement("div", { className: "categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
210
+ React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
211
+ React.createElement("span", null, itm))); }))));
212
+ };
213
+
110
214
  exports.Button = Button;
215
+ exports.FilterBar = FilterBar;
111
216
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n /**\n * Is this the principal call to action on the page?\n */\n type?: \"primary\" | \"secondary\";\n /**\n * What background color to use\n */\n textColor?: string;\n /**\n * How large should the button be?\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n type = \"primary\",\n textColor,\n size = \"medium\",\n onClick,\n label,\n}: ButtonProps) => {\n const [theState, setTheState] = useState(4);\n\n return (\n <button\n type=\"button\"\n className={classNames(\n \"storybook-button\",\n `storybook-button--${size}`,\n `storybook-button--${type}`\n )}\n style={textColor ? { color: textColor } : {}}\n onClick={onClick}\n >\n {`${label} ${theState}`}\n </button>\n );\n};\n\nexport default Button;\n"],"names":["useState"],"mappings":"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","x_google_ignoreList":[0,1]}
1
+ {"version":3,"file":"index.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/FilterBar/FilterBar.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n /**\n * Is this the principal call to action on the page?\n */\n type?: \"primary\" | \"secondary\";\n /**\n * What background color to use\n */\n textColor?: string;\n /**\n * How large should the button be?\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n type = \"primary\",\n textColor,\n size = \"medium\",\n onClick,\n label,\n}: ButtonProps) => {\n const [theState, setTheState] = useState(4);\n\n return (\n <button\n type=\"button\"\n className={classNames(\n \"storybook-button\",\n `storybook-button--${size}`,\n `storybook-button--${type}`\n )}\n style={textColor ? { color: textColor } : {}}\n onClick={onClick}\n >\n {`${label} ${theState}`}\n </button>\n );\n};\n\nexport default Button;\n","import React, { useState } from \"react\";\r\nimport \"./FilterBar.css\";\r\n\r\nexport default function FilterBar() {\r\n const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);\r\n // const [startDate, setStartDate] = useState(0);\r\n // const [endDate, setEndDate] = useState(0);\r\n const [guestsAdults, setGuestsAdults] = useState(0);\r\n const [guestsKids, setGuestsKids] = useState(0);\r\n const [categories, setCategories] = useState(0);\r\n\r\n const handleSelectedFilter = (id: any) => {\r\n setSelectedFilter(id);\r\n };\r\n\r\n const handleSubmit = () => {\r\n const queryParams = new URLSearchParams();\r\n\r\n const params = {\r\n // startDate,\r\n // endDate,\r\n guestsAdults,\r\n guestsKids,\r\n categories,\r\n };\r\n\r\n for (const [key, value] of Object.entries(params)) {\r\n if (value) {\r\n queryParams.append(key, value.toString());\r\n }\r\n }\r\n\r\n const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;\r\n window.location.href = url;\r\n handleSelectedFilter(false);\r\n };\r\n\r\n return (\r\n <div className=\"search-widget\">\r\n <div className=\"search-widget-header\">\r\n <SelectButton\r\n label=\"Start date\"\r\n onClick={() => handleSelectedFilter(1)}\r\n />\r\n <Divider />\r\n <SelectButton\r\n label=\"End date\"\r\n onClick={() => handleSelectedFilter(2)}\r\n />\r\n <Divider />\r\n <SelectButton label=\"Guests\" onClick={() => handleSelectedFilter(3)} />\r\n <Divider />\r\n <SelectButton\r\n label=\"Categories\"\r\n onClick={() => handleSelectedFilter(4)}\r\n />\r\n <SubmitButton onClick={handleSubmit} />\r\n </div>\r\n\r\n {selectedFilter && (\r\n <div className=\"search-widget-container\">\r\n {selectedFilter === 1 && <StartDate />}\r\n {selectedFilter === 2 && <EndDate />}\r\n {selectedFilter === 3 && (\r\n <Guests\r\n guestsAdults={guestsAdults}\r\n guestsKids={guestsKids}\r\n decrementAdults={() => setGuestsAdults(guestsAdults - 1)}\r\n incrementAdults={() => setGuestsAdults(guestsAdults + 1)}\r\n decrementKids={() => setGuestsKids(guestsKids - 1)}\r\n incrementKids={() => setGuestsKids(guestsKids + 1)}\r\n />\r\n )}\r\n {selectedFilter === 4 && (\r\n <Categories categories={categories} setCategories={setCategories} />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nconst Divider = () => {\r\n return <div className=\"search-widget-divider\" />;\r\n};\r\n\r\nconst SubmitButton = ({ onClick }: any) => {\r\n return (\r\n <button className=\"search-widget-submit-button\" onClick={onClick}>\r\n Apply filters\r\n </button>\r\n );\r\n};\r\n\r\nconst SelectButton = ({ label, onClick }: any) => {\r\n return (\r\n <button className=\"search-widget-select-button\" onClick={onClick}>\r\n {label}\r\n </button>\r\n );\r\n};\r\n\r\nconst StartDate = () => {\r\n return <div>Start date</div>;\r\n};\r\n\r\nconst EndDate = () => {\r\n return <div>End date</div>;\r\n};\r\n\r\nconst Guests = ({\r\n guestsAdults,\r\n guestsKids,\r\n decrementAdults,\r\n incrementAdults,\r\n decrementKids,\r\n incrementKids,\r\n}: any) => {\r\n return (\r\n <div className=\"search-widget-guests\">\r\n <h3>Guests</h3>\r\n <p>Who's coming?</p>\r\n\r\n <div className=\"guests-filter-container\">\r\n <div className=\"guests-filter-inner\">\r\n <span>Adults</span>\r\n <div>\r\n <button onClick={decrementAdults} disabled={guestsAdults < 1}>\r\n -\r\n </button>\r\n <span>{guestsAdults}</span>\r\n <button onClick={incrementAdults}>+</button>\r\n </div>\r\n </div>\r\n <div className=\"guests-filter-inner\">\r\n <span>Kids</span>\r\n <div>\r\n <button onClick={decrementKids} disabled={guestsKids < 1}>\r\n -\r\n </button>\r\n <span>{guestsKids}</span>\r\n <button onClick={incrementKids}>+</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst Categories = ({ categories, setCategories }: any) => {\r\n const categoriesPlaceholder = [\r\n \"Weekend\",\r\n \"Week\",\r\n \"Summer camp\",\r\n \"Winter camp\",\r\n ];\r\n\r\n const [selectedCategory, setSelectedCategory] = useState(\"\");\r\n\r\n const handleCategoryChange = (selectedCategory: any) => {\r\n setSelectedCategory(selectedCategory);\r\n setCategories(selectedCategory); // Update the parent component's state with the selected category\r\n };\r\n\r\n return (\r\n <div className=\"search-widget-categories\">\r\n <h3>CATEGORY</h3>\r\n <div className=\"categories-filter-inner\">\r\n {categoriesPlaceholder.map((itm, idx) => (\r\n <div key={idx}>\r\n <input\r\n type=\"radio\"\r\n value={itm}\r\n checked={selectedCategory === itm}\r\n onChange={() => handleCategoryChange(itm)}\r\n />\r\n <span>{itm}</span>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["useState"],"mappings":"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","x_google_ignoreList":[0,1]}
package/lib/index.umd.js CHANGED
@@ -97,8 +97,8 @@
97
97
  }
98
98
  }
99
99
 
100
- var css_248z = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
101
- styleInject(css_248z);
100
+ var css_248z$1 = ".storybook-button {\n font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-weight: 700;\n border: 0;\n border-radius: 3em;\n cursor: pointer;\n display: inline-block;\n line-height: 1;\n}\n.storybook-button--primary {\n color: white;\n background-color: #1ea7fd;\n}\n.storybook-button--secondary {\n color: #333;\n background-color: transparent;\n box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;\n}\n.storybook-button--small {\n font-size: 12px;\n padding: 10px 16px;\n}\n.storybook-button--medium {\n font-size: 14px;\n padding: 11px 20px;\n}\n.storybook-button--large {\n font-size: 16px;\n padding: 12px 24px;\n}";
101
+ styleInject(css_248z$1);
102
102
 
103
103
  /**
104
104
  * Primary UI component for user interaction
@@ -109,7 +109,112 @@
109
109
  return (React.createElement("button", { type: "button", className: classNames("storybook-button", "storybook-button--".concat(size), "storybook-button--".concat(type)), style: textColor ? { color: textColor } : {}, onClick: onClick }, "".concat(label, " ").concat(theState)));
110
110
  };
111
111
 
112
+ var css_248z = "/* Structure ---------------------------- */\r\n\r\n.root {\r\n width: 100%;\r\n}\r\n\r\n.search-widget {\r\n box-sizing: border-box;\r\n max-width: 1100px;\r\n position: relative;\r\n}\r\n\r\n.search-widget-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 10px 20px;\r\n position: relative;\r\n z-index: 222;\r\n \r\n border-radius: 40px;\r\n background-color: #ecf1f4;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-container {\r\n background-color: #ecf1f4;\r\n min-height: 100px;\r\n \r\n padding: 90px 40px 30px 40px;\r\n position: absolute;\r\n top: 0;\r\n z-index: 111;\r\n border-radius: 40px;\r\n width: -webkit-fill-available;\r\n box-shadow: 0px 6px 11px 0px #a7a4a480;\r\n}\r\n\r\n.search-widget-divider {\r\n width: 1px;\r\n margin: 0 10px;\r\n height: 35px;\r\n background-color: #384265;\r\n}\r\n\r\n.search-widget-submit-button {\r\n width: auto;\r\n height: auto;\r\n background-color: #384265;\r\n color: #fff;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n border: none;\r\n}\r\n\r\n.search-widget-select-button {\r\n width: auto;\r\n height: auto;\r\n background-color: transparent;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n cursor: pointer;\r\n}\r\n\r\n/* Filters - Guests ---------------------------- */\r\n\r\n.search-widget-guests {\r\n text-align: initial;\r\n}\r\n\r\n.guests-filter-container {\r\n display: flex;\r\n margin-top: 30px;\r\n}\r\n\r\n.guests-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.guests-filter-inner:not(:last-child) {\r\n margin-right: 50px;\r\n}\r\n\r\n.guests-filter-inner > span {\r\n display: block;\r\n margin-right: 20px;\r\n font-weight: bold;\r\n}\r\n\r\n.guests-filter-inner > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.guests-filter-inner > div > span {\r\n margin: 0 10px;\r\n}\r\n\r\n.guests-filter-inner > div button {\r\n border-radius: 50%;\r\n border: none;\r\n background-color: #CDEEFF;\r\n width: 25px;\r\n height: 25px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 20px;\r\n}\r\n\r\n/* Filters - Categories ---------------------------- */\r\n\r\n.search-widget-categories {\r\n text-align: center;\r\n}\r\n\r\n.categories-filter-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n}\r\n\r\n.categories-filter-inner input {\r\n cursor: pointer;\r\n margin-right: 10px;\r\n}\r\n\r\n";
113
+ styleInject(css_248z);
114
+
115
+ function FilterBar() {
116
+ var _a = React.useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
117
+ // const [startDate, setStartDate] = useState(0);
118
+ // const [endDate, setEndDate] = useState(0);
119
+ var _b = React.useState(0), guestsAdults = _b[0], setGuestsAdults = _b[1];
120
+ var _c = React.useState(0), guestsKids = _c[0], setGuestsKids = _c[1];
121
+ var _d = React.useState(0), categories = _d[0], setCategories = _d[1];
122
+ var handleSelectedFilter = function (id) {
123
+ setSelectedFilter(id);
124
+ };
125
+ var handleSubmit = function () {
126
+ var queryParams = new URLSearchParams();
127
+ var params = {
128
+ // startDate,
129
+ // endDate,
130
+ guestsAdults: guestsAdults,
131
+ guestsKids: guestsKids,
132
+ categories: categories,
133
+ };
134
+ for (var _i = 0, _a = Object.entries(params); _i < _a.length; _i++) {
135
+ var _b = _a[_i], key = _b[0], value = _b[1];
136
+ if (value) {
137
+ queryParams.append(key, value.toString());
138
+ }
139
+ }
140
+ var url = "http://localhost:4000/en/events/?".concat(queryParams.toString());
141
+ window.location.href = url;
142
+ handleSelectedFilter(false);
143
+ };
144
+ return (React.createElement("div", { className: "search-widget" },
145
+ React.createElement("div", { className: "search-widget-header" },
146
+ React.createElement(SelectButton, { label: "Start date", onClick: function () { return handleSelectedFilter(1); } }),
147
+ React.createElement(Divider, null),
148
+ React.createElement(SelectButton, { label: "End date", onClick: function () { return handleSelectedFilter(2); } }),
149
+ React.createElement(Divider, null),
150
+ React.createElement(SelectButton, { label: "Guests", onClick: function () { return handleSelectedFilter(3); } }),
151
+ React.createElement(Divider, null),
152
+ React.createElement(SelectButton, { label: "Categories", onClick: function () { return handleSelectedFilter(4); } }),
153
+ React.createElement(SubmitButton, { onClick: handleSubmit })),
154
+ selectedFilter && (React.createElement("div", { className: "search-widget-container" },
155
+ selectedFilter === 1 && React.createElement(StartDate, null),
156
+ selectedFilter === 2 && React.createElement(EndDate, null),
157
+ selectedFilter === 3 && (React.createElement(Guests, { guestsAdults: guestsAdults, guestsKids: guestsKids, decrementAdults: function () { return setGuestsAdults(guestsAdults - 1); }, incrementAdults: function () { return setGuestsAdults(guestsAdults + 1); }, decrementKids: function () { return setGuestsKids(guestsKids - 1); }, incrementKids: function () { return setGuestsKids(guestsKids + 1); } })),
158
+ selectedFilter === 4 && (React.createElement(Categories, { categories: categories, setCategories: setCategories }))))));
159
+ }
160
+ var Divider = function () {
161
+ return React.createElement("div", { className: "search-widget-divider" });
162
+ };
163
+ var SubmitButton = function (_a) {
164
+ var onClick = _a.onClick;
165
+ return (React.createElement("button", { className: "search-widget-submit-button", onClick: onClick }, "Apply filters"));
166
+ };
167
+ var SelectButton = function (_a) {
168
+ var label = _a.label, onClick = _a.onClick;
169
+ return (React.createElement("button", { className: "search-widget-select-button", onClick: onClick }, label));
170
+ };
171
+ var StartDate = function () {
172
+ return React.createElement("div", null, "Start date");
173
+ };
174
+ var EndDate = function () {
175
+ return React.createElement("div", null, "End date");
176
+ };
177
+ var Guests = function (_a) {
178
+ var guestsAdults = _a.guestsAdults, guestsKids = _a.guestsKids, decrementAdults = _a.decrementAdults, incrementAdults = _a.incrementAdults, decrementKids = _a.decrementKids, incrementKids = _a.incrementKids;
179
+ return (React.createElement("div", { className: "search-widget-guests" },
180
+ React.createElement("h3", null, "Guests"),
181
+ React.createElement("p", null, "Who's coming?"),
182
+ React.createElement("div", { className: "guests-filter-container" },
183
+ React.createElement("div", { className: "guests-filter-inner" },
184
+ React.createElement("span", null, "Adults"),
185
+ React.createElement("div", null,
186
+ React.createElement("button", { onClick: decrementAdults, disabled: guestsAdults < 1 }, "-"),
187
+ React.createElement("span", null, guestsAdults),
188
+ React.createElement("button", { onClick: incrementAdults }, "+"))),
189
+ React.createElement("div", { className: "guests-filter-inner" },
190
+ React.createElement("span", null, "Kids"),
191
+ React.createElement("div", null,
192
+ React.createElement("button", { onClick: decrementKids, disabled: guestsKids < 1 }, "-"),
193
+ React.createElement("span", null, guestsKids),
194
+ React.createElement("button", { onClick: incrementKids }, "+"))))));
195
+ };
196
+ var Categories = function (_a) {
197
+ _a.categories; var setCategories = _a.setCategories;
198
+ var categoriesPlaceholder = [
199
+ "Weekend",
200
+ "Week",
201
+ "Summer camp",
202
+ "Winter camp",
203
+ ];
204
+ var _b = React.useState(""), selectedCategory = _b[0], setSelectedCategory = _b[1];
205
+ var handleCategoryChange = function (selectedCategory) {
206
+ setSelectedCategory(selectedCategory);
207
+ setCategories(selectedCategory); // Update the parent component's state with the selected category
208
+ };
209
+ return (React.createElement("div", { className: "search-widget-categories" },
210
+ React.createElement("h3", null, "CATEGORY"),
211
+ React.createElement("div", { className: "categories-filter-inner" }, categoriesPlaceholder.map(function (itm, idx) { return (React.createElement("div", { key: idx },
212
+ React.createElement("input", { type: "radio", value: itm, checked: selectedCategory === itm, onChange: function () { return handleCategoryChange(itm); } }),
213
+ React.createElement("span", null, itm))); }))));
214
+ };
215
+
112
216
  exports.Button = Button;
217
+ exports.FilterBar = FilterBar;
113
218
 
114
219
  }));
115
220
  //# sourceMappingURL=index.umd.js.map
package/lib/index.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.umd.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n /**\n * Is this the principal call to action on the page?\n */\n type?: \"primary\" | \"secondary\";\n /**\n * What background color to use\n */\n textColor?: string;\n /**\n * How large should the button be?\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n type = \"primary\",\n textColor,\n size = \"medium\",\n onClick,\n label,\n}: ButtonProps) => {\n const [theState, setTheState] = useState(4);\n\n return (\n <button\n type=\"button\"\n className={classNames(\n \"storybook-button\",\n `storybook-button--${size}`,\n `storybook-button--${type}`\n )}\n style={textColor ? { color: textColor } : {}}\n onClick={onClick}\n >\n {`${label} ${theState}`}\n </button>\n );\n};\n\nexport default Button;\n"],"names":["useState"],"mappings":"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","x_google_ignoreList":[0,1]}
1
+ {"version":3,"file":"index.umd.js","sources":["../node_modules/classnames/index.js","../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/FilterBar/FilterBar.tsx"],"sourcesContent":["/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React, { useState } from \"react\";\nimport classNames from \"classnames\";\nimport \"./button.css\";\n\nexport interface ButtonProps {\n /**\n * Is this the principal call to action on the page?\n */\n type?: \"primary\" | \"secondary\";\n /**\n * What background color to use\n */\n textColor?: string;\n /**\n * How large should the button be?\n */\n size?: \"small\" | \"medium\" | \"large\";\n /**\n * Button contents\n */\n label: string;\n /**\n * Optional click handler\n */\n onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n}\n\n/**\n * Primary UI component for user interaction\n */\nconst Button = ({\n type = \"primary\",\n textColor,\n size = \"medium\",\n onClick,\n label,\n}: ButtonProps) => {\n const [theState, setTheState] = useState(4);\n\n return (\n <button\n type=\"button\"\n className={classNames(\n \"storybook-button\",\n `storybook-button--${size}`,\n `storybook-button--${type}`\n )}\n style={textColor ? { color: textColor } : {}}\n onClick={onClick}\n >\n {`${label} ${theState}`}\n </button>\n );\n};\n\nexport default Button;\n","import React, { useState } from \"react\";\r\nimport \"./FilterBar.css\";\r\n\r\nexport default function FilterBar() {\r\n const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);\r\n // const [startDate, setStartDate] = useState(0);\r\n // const [endDate, setEndDate] = useState(0);\r\n const [guestsAdults, setGuestsAdults] = useState(0);\r\n const [guestsKids, setGuestsKids] = useState(0);\r\n const [categories, setCategories] = useState(0);\r\n\r\n const handleSelectedFilter = (id: any) => {\r\n setSelectedFilter(id);\r\n };\r\n\r\n const handleSubmit = () => {\r\n const queryParams = new URLSearchParams();\r\n\r\n const params = {\r\n // startDate,\r\n // endDate,\r\n guestsAdults,\r\n guestsKids,\r\n categories,\r\n };\r\n\r\n for (const [key, value] of Object.entries(params)) {\r\n if (value) {\r\n queryParams.append(key, value.toString());\r\n }\r\n }\r\n\r\n const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;\r\n window.location.href = url;\r\n handleSelectedFilter(false);\r\n };\r\n\r\n return (\r\n <div className=\"search-widget\">\r\n <div className=\"search-widget-header\">\r\n <SelectButton\r\n label=\"Start date\"\r\n onClick={() => handleSelectedFilter(1)}\r\n />\r\n <Divider />\r\n <SelectButton\r\n label=\"End date\"\r\n onClick={() => handleSelectedFilter(2)}\r\n />\r\n <Divider />\r\n <SelectButton label=\"Guests\" onClick={() => handleSelectedFilter(3)} />\r\n <Divider />\r\n <SelectButton\r\n label=\"Categories\"\r\n onClick={() => handleSelectedFilter(4)}\r\n />\r\n <SubmitButton onClick={handleSubmit} />\r\n </div>\r\n\r\n {selectedFilter && (\r\n <div className=\"search-widget-container\">\r\n {selectedFilter === 1 && <StartDate />}\r\n {selectedFilter === 2 && <EndDate />}\r\n {selectedFilter === 3 && (\r\n <Guests\r\n guestsAdults={guestsAdults}\r\n guestsKids={guestsKids}\r\n decrementAdults={() => setGuestsAdults(guestsAdults - 1)}\r\n incrementAdults={() => setGuestsAdults(guestsAdults + 1)}\r\n decrementKids={() => setGuestsKids(guestsKids - 1)}\r\n incrementKids={() => setGuestsKids(guestsKids + 1)}\r\n />\r\n )}\r\n {selectedFilter === 4 && (\r\n <Categories categories={categories} setCategories={setCategories} />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n}\r\n\r\nconst Divider = () => {\r\n return <div className=\"search-widget-divider\" />;\r\n};\r\n\r\nconst SubmitButton = ({ onClick }: any) => {\r\n return (\r\n <button className=\"search-widget-submit-button\" onClick={onClick}>\r\n Apply filters\r\n </button>\r\n );\r\n};\r\n\r\nconst SelectButton = ({ label, onClick }: any) => {\r\n return (\r\n <button className=\"search-widget-select-button\" onClick={onClick}>\r\n {label}\r\n </button>\r\n );\r\n};\r\n\r\nconst StartDate = () => {\r\n return <div>Start date</div>;\r\n};\r\n\r\nconst EndDate = () => {\r\n return <div>End date</div>;\r\n};\r\n\r\nconst Guests = ({\r\n guestsAdults,\r\n guestsKids,\r\n decrementAdults,\r\n incrementAdults,\r\n decrementKids,\r\n incrementKids,\r\n}: any) => {\r\n return (\r\n <div className=\"search-widget-guests\">\r\n <h3>Guests</h3>\r\n <p>Who's coming?</p>\r\n\r\n <div className=\"guests-filter-container\">\r\n <div className=\"guests-filter-inner\">\r\n <span>Adults</span>\r\n <div>\r\n <button onClick={decrementAdults} disabled={guestsAdults < 1}>\r\n -\r\n </button>\r\n <span>{guestsAdults}</span>\r\n <button onClick={incrementAdults}>+</button>\r\n </div>\r\n </div>\r\n <div className=\"guests-filter-inner\">\r\n <span>Kids</span>\r\n <div>\r\n <button onClick={decrementKids} disabled={guestsKids < 1}>\r\n -\r\n </button>\r\n <span>{guestsKids}</span>\r\n <button onClick={incrementKids}>+</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst Categories = ({ categories, setCategories }: any) => {\r\n const categoriesPlaceholder = [\r\n \"Weekend\",\r\n \"Week\",\r\n \"Summer camp\",\r\n \"Winter camp\",\r\n ];\r\n\r\n const [selectedCategory, setSelectedCategory] = useState(\"\");\r\n\r\n const handleCategoryChange = (selectedCategory: any) => {\r\n setSelectedCategory(selectedCategory);\r\n setCategories(selectedCategory); // Update the parent component's state with the selected category\r\n };\r\n\r\n return (\r\n <div className=\"search-widget-categories\">\r\n <h3>CATEGORY</h3>\r\n <div className=\"categories-filter-inner\">\r\n {categoriesPlaceholder.map((itm, idx) => (\r\n <div key={idx}>\r\n <input\r\n type=\"radio\"\r\n value={itm}\r\n checked={selectedCategory === itm}\r\n onChange={() => handleCategoryChange(itm)}\r\n />\r\n <span>{itm}</span>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["useState"],"mappings":";;;;;;;;;;;;;;;;;;;CAKA;AACA;CACA,CAAA,CAAC,YAAY;AAEb;CACA,EAAC,IAAI,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;AAEhC;GACC,SAAS,UAAU,GAAG;CACvB,GAAE,IAAI,OAAO,GAAG,EAAE,CAAC;AACnB;CACA,GAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;CAC7C,IAAG,IAAI,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;CAC1B,IAAG,IAAI,CAAC,GAAG,EAAE,SAAS;AACtB;CACA,IAAG,IAAI,OAAO,GAAG,OAAO,GAAG,CAAC;AAC5B;KACG,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;CACrD,KAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;MAClB,MAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;CAClC,KAAI,IAAI,GAAG,CAAC,MAAM,EAAE;OACf,IAAI,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;OACxC,IAAI,KAAK,EAAE;CAChB,OAAM,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpB;OACD;CACL,KAAI,MAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;MAChC,IAAI,GAAG,CAAC,QAAQ,KAAK,MAAM,CAAC,SAAS,CAAC,QAAQ,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE;OACrG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;CAClC,MAAK,SAAS;OACT;AACL;CACA,KAAI,KAAK,IAAI,GAAG,IAAI,GAAG,EAAE;CACzB,MAAK,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;CAC5C,OAAM,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAClB;OACD;MACD;KACD;AACH;CACA,GAAE,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzB;AACF;GACC,IAAqC,MAAM,CAAC,OAAO,EAAE;CACtD,GAAE,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC;IAChC,MAAA,CAAA,OAAA,GAAiB,UAAU,CAAC;CAC9B,GAAE,MAKM;CACR,GAAE,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B;CACF,EAAC,EAAE,EAAA;;;;;;CC3DH,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;CAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;CACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;CACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;CACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;CACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;CAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;CACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;CAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;CACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;CAChD,KAAK,MAAM;CACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;CAC9B,KAAK;CACL,GAAG,MAAM;CACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B,GAAG;AACH;CACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;CACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;CACnC,GAAG,MAAM;CACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;CACpD,GAAG;CACH;;;;;CCEA;;CAEG;AACG,KAAA,MAAM,GAAG,UAAC,EAMF,EAAA;SALZ,EAAgB,GAAA,EAAA,CAAA,IAAA,EAAhB,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAChB,SAAS,eAAA,EACT,EAAA,GAAA,EAAA,CAAA,IAAe,EAAf,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAQ,GAAA,EAAA,EACf,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;KAEC,IAAA,EAAA,GAA0BA,cAAQ,CAAC,CAAC,CAAC,CAApC,CAAA,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAa,EAAA,CAAA,CAAA,EAAgB;KAE5C,QACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,UAAU,CACnB,kBAAkB,EAClB,oBAAqB,CAAA,MAAA,CAAA,IAAI,CAAE,EAC3B,oBAAA,CAAA,MAAA,CAAqB,IAAI,CAAE,CAC5B,EACD,KAAK,EAAE,SAAS,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,EAC5C,OAAO,EAAE,OAAO,IAEf,EAAG,CAAA,MAAA,CAAA,KAAK,cAAI,QAAQ,CAAE,CAChB,EACT;CACJ;;;;;CClDc,SAAU,SAAS,GAAA;KACzB,IAAA,EAAA,GAAsCA,cAAQ,CAAmB,KAAK,CAAC,EAAtE,cAAc,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,CAAA,CAAqC,CAAC;;;KAGxE,IAAA,EAAA,GAAkCA,cAAQ,CAAC,CAAC,CAAC,EAA5C,YAAY,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,eAAe,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;KAC9C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;KAC1C,IAAA,EAAA,GAA8BA,cAAQ,CAAC,CAAC,CAAC,EAAxC,UAAU,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,aAAa,GAAA,EAAA,CAAA,CAAA,CAAe,CAAC;KAEhD,IAAM,oBAAoB,GAAG,UAAC,EAAO,EAAA;SACnC,iBAAiB,CAAC,EAAE,CAAC,CAAC;CACxB,KAAC,CAAC;CAEF,IAAA,IAAM,YAAY,GAAG,YAAA;CACnB,QAAA,IAAM,WAAW,GAAG,IAAI,eAAe,EAAE,CAAC;CAE1C,QAAA,IAAM,MAAM,GAAG;;;CAGb,YAAA,YAAY,EAAA,YAAA;CACZ,YAAA,UAAU,EAAA,UAAA;CACV,YAAA,UAAU,EAAA,UAAA;UACX,CAAC;CAEF,QAAA,KAA2B,IAAsB,EAAA,GAAA,CAAA,EAAtB,EAAA,GAAA,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAtB,EAAsB,GAAA,EAAA,CAAA,MAAA,EAAtB,IAAsB,EAAE;CAAxC,YAAA,IAAA,WAAY,EAAX,GAAG,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,GAAA,EAAA,CAAA,CAAA,CAAA,CAAA;CACpB,YAAA,IAAI,KAAK,EAAE;iBACT,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;CAC3C,aAAA;CACF,SAAA;SAED,IAAM,GAAG,GAAG,mCAAoC,CAAA,MAAA,CAAA,WAAW,CAAC,QAAQ,EAAE,CAAE,CAAC;CACzE,QAAA,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC;SAC3B,oBAAoB,CAAC,KAAK,CAAC,CAAC;CAC9B,KAAC,CAAC;CAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,eAAe,EAAA;SAC5B,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA;CACnC,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EACtC,CAAA;CACF,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACX,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EACtC,CAAA;CACF,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACX,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EAAI,CAAA;CACvE,YAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACX,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EACX,EAAA,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,YAAM,EAAA,OAAA,oBAAoB,CAAC,CAAC,CAAC,CAAA,EAAA,EACtC,CAAA;CACF,YAAA,KAAA,CAAA,aAAA,CAAC,YAAY,EAAC,EAAA,OAAO,EAAE,YAAY,GAAI,CACnC;CAEL,QAAA,cAAc,KACb,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;CACrC,YAAA,cAAc,KAAK,CAAC,IAAI,KAAA,CAAA,aAAA,CAAC,SAAS,EAAG,IAAA,CAAA;CACrC,YAAA,cAAc,KAAK,CAAC,IAAI,KAAA,CAAA,aAAA,CAAC,OAAO,EAAG,IAAA,CAAA;CACnC,YAAA,cAAc,KAAK,CAAC,KACnB,KAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,YAAM,EAAA,OAAA,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA,EAAA,EACxD,eAAe,EAAE,cAAM,OAAA,eAAe,CAAC,YAAY,GAAG,CAAC,CAAC,CAAA,EAAA,EACxD,aAAa,EAAE,YAAA,EAAM,OAAA,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAA7B,EAA6B,EAClD,aAAa,EAAE,YAAA,EAAM,OAAA,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC,CAA7B,EAA6B,GAClD,CACH;aACA,cAAc,KAAK,CAAC,KACnB,oBAAC,UAAU,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAI,CAAA,CACrE,CACG,CACP,CACG,EACN;CACJ,CAAC;CAED,IAAM,OAAO,GAAG,YAAA;CACd,IAAA,OAAO,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,GAAG,CAAC;CACnD,CAAC,CAAC;CAEF,IAAM,YAAY,GAAG,UAAC,EAAgB,EAAA;CAAd,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;KAC7B,QACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,OAAO,EAEvD,EAAA,eAAA,CAAA,EACT;CACJ,CAAC,CAAC;CAEF,IAAM,YAAY,GAAG,UAAC,EAAuB,EAAA;SAArB,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,CAAA;CACpC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,OAAO,EAAA,EAC7D,KAAK,CACC,EACT;CACJ,CAAC,CAAC;CAEF,IAAM,SAAS,GAAG,YAAA;CAChB,IAAA,OAAO,8CAAqB,CAAC;CAC/B,CAAC,CAAC;CAEF,IAAM,OAAO,GAAG,YAAA;CACd,IAAA,OAAO,4CAAmB,CAAC;CAC7B,CAAC,CAAC;CAEF,IAAM,MAAM,GAAG,UAAC,EAOV,EAAA;CANJ,IAAA,IAAA,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,eAAe,qBAAA,EACf,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,aAAa,GAAA,EAAA,CAAA,aAAA,CAAA;CAEb,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,EAAA;SACnC,KAAe,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,QAAA,CAAA;SACf,KAAoB,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,eAAA,CAAA;SAEpB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,yBAAyB,EAAA;aACtC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;iBAClC,KAAmB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAA,CAAA;CACnB,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;qBACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,GAAG,CAAC,EAEnD,EAAA,GAAA,CAAA;CACT,oBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,YAAY,CAAQ;CAC3B,oBAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,eAAe,EAAA,EAAA,GAAA,CAAY,CACxC,CACF;aACN,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;iBAClC,KAAiB,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,MAAA,CAAA;CACjB,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;qBACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,GAAG,CAAC,EAE/C,EAAA,GAAA,CAAA;CACT,oBAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,UAAU,CAAQ;qBACzB,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,aAAa,EAAA,EAAA,GAAA,CAAY,CACtC,CACF,CACF,CACF,EACN;CACJ,CAAC,CAAC;CAEF,IAAM,UAAU,GAAG,UAAC,EAAkC,EAAA;KAAtB,EAAA,CAAA,UAAA,CAAE,KAAA,aAAa,GAAA,EAAA,CAAA,cAAA;CAC7C,IAAA,IAAM,qBAAqB,GAAG;SAC5B,SAAS;SACT,MAAM;SACN,aAAa;SACb,aAAa;MACd,CAAC;KAEI,IAAA,EAAA,GAA0CA,cAAQ,CAAC,EAAE,CAAC,EAArD,gBAAgB,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,CAAA,CAAgB,CAAC;KAE7D,IAAM,oBAAoB,GAAG,UAAC,gBAAqB,EAAA;SACjD,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;CACtC,QAAA,aAAa,CAAC,gBAAgB,CAAC,CAAC;CAClC,KAAC,CAAC;CAEF,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA;SACvC,KAAiB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,UAAA,CAAA;CACjB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yBAAyB,IACrC,qBAAqB,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,GAAG,EAAK,EAAA,QACvC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EAAA;aACX,KACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,gBAAgB,KAAK,GAAG,EACjC,QAAQ,EAAE,YAAA,EAAM,OAAA,oBAAoB,CAAC,GAAG,CAAC,CAAzB,EAAyB,EACzC,CAAA;aACF,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,GAAG,CAAQ,CACd,EACP,EAAA,CAAC,CACE,CACF,EACN;CACJ,CAAC;;;;;;;;;","x_google_ignoreList":[0,1]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.0.25",
3
+ "version": "0.0.28",
4
4
  "description": "A stroybook 6 with TypeScript demo",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
package/src/components/FilterBar/FilterBar.css ADDED
@@ -0,0 +1,131 @@
1
+ /* Structure ---------------------------- */
2
+
3
+ .root {
4
+ width: 100%;
5
+ }
6
+
7
+ .search-widget {
8
+ box-sizing: border-box;
9
+ max-width: 1100px;
10
+ position: relative;
11
+ }
12
+
13
+ .search-widget-header {
14
+ display: flex;
15
+ justify-content: space-between;
16
+ align-items: center;
17
+ padding: 10px 20px;
18
+ position: relative;
19
+ z-index: 222;
20
+
21
+ border-radius: 40px;
22
+ background-color: #ecf1f4;
23
+ box-shadow: 0px 6px 11px 0px #a7a4a480;
24
+ }
25
+
26
+ .search-widget-container {
27
+ background-color: #ecf1f4;
28
+ min-height: 100px;
29
+
30
+ padding: 90px 40px 30px 40px;
31
+ position: absolute;
32
+ top: 0;
33
+ z-index: 111;
34
+ border-radius: 40px;
35
+ width: -webkit-fill-available;
36
+ box-shadow: 0px 6px 11px 0px #a7a4a480;
37
+ }
38
+
39
+ .search-widget-divider {
40
+ width: 1px;
41
+ margin: 0 10px;
42
+ height: 35px;
43
+ background-color: #384265;
44
+ }
45
+
46
+ .search-widget-submit-button {
47
+ width: auto;
48
+ height: auto;
49
+ background-color: #384265;
50
+ color: #fff;
51
+ padding: 10px 20px;
52
+ border-radius: 20px;
53
+ cursor: pointer;
54
+ border: none;
55
+ }
56
+
57
+ .search-widget-select-button {
58
+ width: auto;
59
+ height: auto;
60
+ background-color: transparent;
61
+ border: none;
62
+ padding: 10px 20px;
63
+ border-radius: 20px;
64
+ cursor: pointer;
65
+ }
66
+
67
+ /* Filters - Guests ---------------------------- */
68
+
69
+ .search-widget-guests {
70
+ text-align: initial;
71
+ }
72
+
73
+ .guests-filter-container {
74
+ display: flex;
75
+ margin-top: 30px;
76
+ }
77
+
78
+ .guests-filter-inner {
79
+ display: flex;
80
+ align-items: center;
81
+ }
82
+
83
+ .guests-filter-inner:not(:last-child) {
84
+ margin-right: 50px;
85
+ }
86
+
87
+ .guests-filter-inner > span {
88
+ display: block;
89
+ margin-right: 20px;
90
+ font-weight: bold;
91
+ }
92
+
93
+ .guests-filter-inner > div {
94
+ display: flex;
95
+ align-items: center;
96
+ }
97
+
98
+ .guests-filter-inner > div > span {
99
+ margin: 0 10px;
100
+ }
101
+
102
+ .guests-filter-inner > div button {
103
+ border-radius: 50%;
104
+ border: none;
105
+ background-color: #CDEEFF;
106
+ width: 25px;
107
+ height: 25px;
108
+ display: flex;
109
+ justify-content: center;
110
+ align-items: center;
111
+ font-size: 20px;
112
+ }
113
+
114
+ /* Filters - Categories ---------------------------- */
115
+
116
+ .search-widget-categories {
117
+ text-align: center;
118
+ }
119
+
120
+ .categories-filter-inner {
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ gap: 20px;
125
+ }
126
+
127
+ .categories-filter-inner input {
128
+ cursor: pointer;
129
+ margin-right: 10px;
130
+ }
131
+
package/src/components/FilterBar/FilterBar.stories.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import React from "react";
2
+ import type { Meta, StoryObj } from "@storybook/react";
3
+ import FilterBar from "./FilterBar";
4
+
5
+ // Default metadata of the story https://storybook.js.org/docs/react/api/csf#default-export
6
+ const meta: Meta<typeof FilterBar> = {
7
+ title: "Components/FilterBar",
8
+ component: FilterBar,
9
+ };
10
+
11
+ export default meta;
12
+
13
+ // The story type for the component https://storybook.js.org/docs/react/api/csf#named-story-exports
14
+ type Story = StoryObj<typeof FilterBar>;
15
+
16
+ export const Primary: Story = {
17
+ args: {
18
+ label: "Primary 😃",
19
+ },
20
+ };
package/src/components/FilterBar/FilterBar.tsx ADDED
@@ -0,0 +1,183 @@
1
+ import React, { useState } from "react";
2
+ import "./FilterBar.css";
3
+
4
+ export default function FilterBar() {
5
+ const [selectedFilter, setSelectedFilter] = useState<number | boolean>(false);
6
+ // const [startDate, setStartDate] = useState(0);
7
+ // const [endDate, setEndDate] = useState(0);
8
+ const [guestsAdults, setGuestsAdults] = useState(0);
9
+ const [guestsKids, setGuestsKids] = useState(0);
10
+ const [categories, setCategories] = useState(0);
11
+
12
+ const handleSelectedFilter = (id: any) => {
13
+ setSelectedFilter(id);
14
+ };
15
+
16
+ const handleSubmit = () => {
17
+ const queryParams = new URLSearchParams();
18
+
19
+ const params = {
20
+ // startDate,
21
+ // endDate,
22
+ guestsAdults,
23
+ guestsKids,
24
+ categories,
25
+ };
26
+
27
+ for (const [key, value] of Object.entries(params)) {
28
+ if (value) {
29
+ queryParams.append(key, value.toString());
30
+ }
31
+ }
32
+
33
+ const url = `http://localhost:4000/en/events/?${queryParams.toString()}`;
34
+ window.location.href = url;
35
+ handleSelectedFilter(false);
36
+ };
37
+
38
+ return (
39
+ <div className="search-widget">
40
+ <div className="search-widget-header">
41
+ <SelectButton
42
+ label="Start date"
43
+ onClick={() => handleSelectedFilter(1)}
44
+ />
45
+ <Divider />
46
+ <SelectButton
47
+ label="End date"
48
+ onClick={() => handleSelectedFilter(2)}
49
+ />
50
+ <Divider />
51
+ <SelectButton label="Guests" onClick={() => handleSelectedFilter(3)} />
52
+ <Divider />
53
+ <SelectButton
54
+ label="Categories"
55
+ onClick={() => handleSelectedFilter(4)}
56
+ />
57
+ <SubmitButton onClick={handleSubmit} />
58
+ </div>
59
+
60
+ {selectedFilter && (
61
+ <div className="search-widget-container">
62
+ {selectedFilter === 1 && <StartDate />}
63
+ {selectedFilter === 2 && <EndDate />}
64
+ {selectedFilter === 3 && (
65
+ <Guests
66
+ guestsAdults={guestsAdults}
67
+ guestsKids={guestsKids}
68
+ decrementAdults={() => setGuestsAdults(guestsAdults - 1)}
69
+ incrementAdults={() => setGuestsAdults(guestsAdults + 1)}
70
+ decrementKids={() => setGuestsKids(guestsKids - 1)}
71
+ incrementKids={() => setGuestsKids(guestsKids + 1)}
72
+ />
73
+ )}
74
+ {selectedFilter === 4 && (
75
+ <Categories categories={categories} setCategories={setCategories} />
76
+ )}
77
+ </div>
78
+ )}
79
+ </div>
80
+ );
81
+ }
82
+
83
+ const Divider = () => {
84
+ return <div className="search-widget-divider" />;
85
+ };
86
+
87
+ const SubmitButton = ({ onClick }: any) => {
88
+ return (
89
+ <button className="search-widget-submit-button" onClick={onClick}>
90
+ Apply filters
91
+ </button>
92
+ );
93
+ };
94
+
95
+ const SelectButton = ({ label, onClick }: any) => {
96
+ return (
97
+ <button className="search-widget-select-button" onClick={onClick}>
98
+ {label}
99
+ </button>
100
+ );
101
+ };
102
+
103
+ const StartDate = () => {
104
+ return <div>Start date</div>;
105
+ };
106
+
107
+ const EndDate = () => {
108
+ return <div>End date</div>;
109
+ };
110
+
111
+ const Guests = ({
112
+ guestsAdults,
113
+ guestsKids,
114
+ decrementAdults,
115
+ incrementAdults,
116
+ decrementKids,
117
+ incrementKids,
118
+ }: any) => {
119
+ return (
120
+ <div className="search-widget-guests">
121
+ <h3>Guests</h3>
122
+ <p>Who's coming?</p>
123
+
124
+ <div className="guests-filter-container">
125
+ <div className="guests-filter-inner">
126
+ <span>Adults</span>
127
+ <div>
128
+ <button onClick={decrementAdults} disabled={guestsAdults < 1}>
129
+ -
130
+ </button>
131
+ <span>{guestsAdults}</span>
132
+ <button onClick={incrementAdults}>+</button>
133
+ </div>
134
+ </div>
135
+ <div className="guests-filter-inner">
136
+ <span>Kids</span>
137
+ <div>
138
+ <button onClick={decrementKids} disabled={guestsKids < 1}>
139
+ -
140
+ </button>
141
+ <span>{guestsKids}</span>
142
+ <button onClick={incrementKids}>+</button>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ );
148
+ };
149
+
150
+ const Categories = ({ categories, setCategories }: any) => {
151
+ const categoriesPlaceholder = [
152
+ "Weekend",
153
+ "Week",
154
+ "Summer camp",
155
+ "Winter camp",
156
+ ];
157
+
158
+ const [selectedCategory, setSelectedCategory] = useState("");
159
+
160
+ const handleCategoryChange = (selectedCategory: any) => {
161
+ setSelectedCategory(selectedCategory);
162
+ setCategories(selectedCategory); // Update the parent component's state with the selected category
163
+ };
164
+
165
+ return (
166
+ <div className="search-widget-categories">
167
+ <h3>CATEGORY</h3>
168
+ <div className="categories-filter-inner">
169
+ {categoriesPlaceholder.map((itm, idx) => (
170
+ <div key={idx}>
171
+ <input
172
+ type="radio"
173
+ value={itm}
174
+ checked={selectedCategory === itm}
175
+ onChange={() => handleCategoryChange(itm)}
176
+ />
177
+ <span>{itm}</span>
178
+ </div>
179
+ ))}
180
+ </div>
181
+ </div>
182
+ );
183
+ };
package/src/components/FilterBar/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from "./FilterBar";
package/src/index.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import Button from "./components/Button";
2
+ import FilterBar from "./components/FilterBar";
2
3
 
3
- export { Button };
4
+ export { Button, FilterBar };