willba-component-library 0.0.90 → 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+## Installation
+
+Willba-component-library is available as an [npm package](https://www.npmjs.com/package/willba-component-library).
+
+```sh
+// with npm
+npm install willba-component-library
+
+// with yarn
+yarn add willba-component-library
+```
+
+## Usage
+
+```jsx
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { FilterBar } from 'willba-component-library'
+
+function App() {
+  return <FilterBar redirectUrl={'http://localhost:3000/'} />
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'))
+```
+
+or you can add the willba-component-library using scripts:
+
+<div id='will-filter-bar' style="max-width: 1200px"></div>
+
+<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.0.90/lib/index.umd.js"></script>
+
+<script>
+    const filterBarElement  = React.createElement;
+    const filterBarContainer  = document.getElementById('will-filter-bar');
+    const WillFilterBar = WillbaComponentLibrary.FilterBar ;
+
+    ReactDOM.render(filterBarElement(
+        WillFilterBar,
+          {
+            redirectUrl='http://localhost:3000/'
+          },
+    ), filterBarContainer )
+</script>
+
+### Props Of Filter Bar
+
+| Name          | Value         | Description                                                                          |
+| ------------- | ------------- | ------------------------------------------------------------------------------------ | -------------------- | ---------------------- |
+| redirectUrl   | `"string"`    | Define the URL where the component showld redirect on filtering.                     |
+| language      | `"fi" , "en"` | Specify the language, available languages Finnish and English                        |
+| ageCategories | `[{}]`        | Specify age categories for guests filter: [{id: string, name: string, minAge: number | null, maxAge: number | null, minVal: number}] |

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

@@ -6,6 +6,7 @@ interface FilterBarProps {
     vendor?: string;
     language?: string;
     ageCategories?: AgeCategoryType[];
+    redirectUrl: string;
 }
-export default function FilterBar({ vendor, language, ageCategories, }: FilterBarProps): React.JSX.Element;
+export default function FilterBar({ vendor, language, ageCategories, redirectUrl, }: FilterBarProps): React.JSX.Element;
 export {};

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import { DateRange } from 'react-day-picker';
 import { AgeCategoryCount } from '../FilterBarTypes';
-export default function useFilterBar(ageCategories: any): {
+interface UseFilterBarPropsType {
+    redirectUrl: string;
+}
+export default function useFilterBar({ redirectUrl }: UseFilterBarPropsType): {
     selectedFilter: number | boolean;
     ageCategoryCounts: AgeCategoryCount;
     categories: number;
@@ -15,3 +18,4 @@ export default function useFilterBar(ageCategories: any): {
     updateGuestsCount: (id: number, newCount: number) => void;
     handleResetFilters: () => void;
 };
+export {};

package/lib/index.d.ts

@@ -39,7 +39,8 @@ interface FilterBarProps {
     vendor?: string;
     language?: string;
     ageCategories?: AgeCategoryType[];
+    redirectUrl: string;
 }
-declare function FilterBar({ vendor, language, ageCategories, }: FilterBarProps): React.JSX.Element;
+declare function FilterBar({ vendor, language, ageCategories, redirectUrl, }: FilterBarProps): React.JSX.Element;
 
 export { Button, FilterBar };

package/lib/index.esm.js

@@ -7986,11 +7986,12 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function useFilterBar(ageCategories) {
-    var _a = useState(false), selectedFilter = _a[0], setSelectedFilter = _a[1];
-    var _b = useState(), calendarRange = _b[0], setCalendarRange = _b[1];
-    var _c = useState(0), categories = _c[0], setCategories = _c[1];
-    var _d = useState({}), ageCategoryCounts = _d[0], setAgeCategoryCounts = _d[1];
+function useFilterBar(_a) {
+    var redirectUrl = _a.redirectUrl;
+    var _b = useState(false), selectedFilter = _b[0], setSelectedFilter = _b[1];
+    var _c = useState(), calendarRange = _c[0], setCalendarRange = _c[1];
+    var _d = useState(0), categories = _d[0], setCategories = _d[1];
+    var _e = useState({}), ageCategoryCounts = _e[0], setAgeCategoryCounts = _e[1];
     var updateGuestsCount = function (id, newCount) {
         setAgeCategoryCounts(function (prevCounts) {
             var _a;
@@ -8031,8 +8032,7 @@ function useFilterBar(ageCategories) {
                 queryParams.append(key, value.toString());
             }
         }
-        var url = "http://localhost:4000/en/events/?".concat(queryParams.toString());
-        window.location.href = url;
+        window.location.href = "".concat(redirectUrl).concat(queryParams ? "?".concat(queryParams.toString()) : '');
         handleSelectedFilter(false);
     };
     useEffect(function () {
@@ -10421,15 +10421,15 @@ function CloseButton(_a) {
 }
 
 function FilterBar(_a) {
-    var vendor = _a.vendor, language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? ageCategoriesFallback : _b;
+    var vendor = _a.vendor, language = _a.language, _b = _a.ageCategories, ageCategories = _b === void 0 ? AGE_CATEGORIES_FALLBACK : _b, _c = _a.redirectUrl, redirectUrl = _c === void 0 ? REDIRECT_URL_FALLBACK : _c;
     var themeClass = useTheme({ vendor: vendor });
-    var _c = useState(0); _c[0]; var setRerenderKey = _c[1];
+    var _d = useState(0); _d[0]; var setRerenderKey = _d[1];
     useEffect(function () {
         instance.changeLanguage(language);
         setRerenderKey(function (prevKey) { return prevKey + 1; });
     }, [language]);
     var t = useTranslation('filterBar').t;
-    var _d = useFilterBar(), selectedFilter = _d.selectedFilter, ageCategoryCounts = _d.ageCategoryCounts, categories = _d.categories, calendarRange = _d.calendarRange, setCalendarRange = _d.setCalendarRange, setCategories = _d.setCategories, handleSelectedFilter = _d.handleSelectedFilter, handleSubmit = _d.handleSubmit, updateGuestsCount = _d.updateGuestsCount, handleResetFilters = _d.handleResetFilters;
+    var _e = useFilterBar({ redirectUrl: redirectUrl }), selectedFilter = _e.selectedFilter, ageCategoryCounts = _e.ageCategoryCounts, categories = _e.categories, calendarRange = _e.calendarRange, setCalendarRange = _e.setCalendarRange, setCategories = _e.setCategories, handleSelectedFilter = _e.handleSelectedFilter, handleSubmit = _e.handleSubmit, updateGuestsCount = _e.updateGuestsCount, handleResetFilters = _e.handleResetFilters;
     return (React__default__default.createElement(React__default__default.Fragment, null,
         selectedFilter && (React__default__default.createElement("div", { className: "will-filter-bar will-filter-bar-underlay", onClick: function () {
                 handleSelectedFilter(false);
@@ -10448,10 +10448,11 @@ function FilterBar(_a) {
                 selectedFilter === 3 && (React__default__default.createElement(Guests, { updateGuestsCount: updateGuestsCount, ageCategories: ageCategories, ageCategoryCounts: ageCategoryCounts })),
                 selectedFilter === 4 && (React__default__default.createElement(Categories, { categories: categories, setCategories: setCategories })))))));
 }
+////////////
 var fontWigthBold = function (input) {
     return { fontWeight: input ? 'bold' : 'initial' };
 };
-var ageCategoriesFallback = [
+var AGE_CATEGORIES_FALLBACK = [
     {
         id: '1',
         name: 'Adults',
@@ -10467,6 +10468,7 @@ var ageCategoriesFallback = [
         minVal: 0,
     },
 ];
+var REDIRECT_URL_FALLBACK = 'http://localhost:3000/';
 
 export { Button$1 as Button, FilterBar };
 //# sourceMappingURL=index.esm.js.map