willba-component-library 0.3.27 → 0.4.0

package/README.md

@@ -1,165 +1,127 @@
 ## Description
 
-Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an <a href="https://www.npmjs.com/package/willba-component-library">npm package</a>, or can be used directly through scripts.
+Willba Component Library is a custom UI component collection that can be used across multiple platforms — as an [npm package](https://www.npmjs.com/package/willba-component-library) inside a React app, or as a standalone `<script>` snippet on any website.
 
 <div style="display: flex; gap: 20px;">
-  <img src="https://lh3.googleusercontent.com/fife/ALs6j_E9S05-AoxQW3EDUN_R0_CoKocZjB_0SwUe2s04qlzSMBaR18MI_AizFrkKf7JLELYTyzuUTVr5z_IehlqgF_fmQ9MFAhDfm5ATXvL6PjXqK5tClfew0sAXHodybiN2PFhqfmOsikYpaT-NxYBg6ISV8jIjKkXuQCCr7m1_FqqEMDm8zj5s2Gj4Vs8pT42J9pce2Z1ZXnkMMPYiN37cm-ozobzjP4WOA4400RptGwJmqrvKkZxhJcB-Y-ZbifPkuIp9Wzb0FhKFsEe01l6GiGBmQlT7HeuH74N3FnsLx9GVvhbyPWLaaN9H4p7V9WzDwVvMmJWICrhfLxptJn0EYaxuYfkrLbKQsF5NC-3dvk43AGDfHukDphV5AukZBomSGoIqK9d3cdaiT3zctH4ksupAP6lEv2AQgJE0u-_wuSzMW8f5Vn2_rHUhxAXPDYvL1MH6KNv8jI39adbIyeK9xAF1sIpv2rpHtyiJcCTO_xMeJWgKXNKUdh5vAKRS1vzNFBTkQDy-lriFgGUxy3y1BHv0CtCs_l_Cl2B8xqbDXjkGzKJHxR1HYquOI0WZJDVWTrufwarVrXRTlY07VK6UcF6WEFd_UDzS44adkAXD2Vpf_xDTrRsoi0lcRBgctj6MWkEzOJPTQJK014XPROQ_PoF547CN_ht9G3HqITvWB-Bn6OTYWGbfbc4wPR7MB-iWS8XawNLn-TzQhn3ZzB1kLcCc0u9SNjhXGeFvFAcoPll21y1FX85tQYrXlnIzlIikKzAxuKjiNFDC4Bvrj8RarVeTaEcUU5wv6NswE6MJ-mI5_s28AmgoDurW4mAGhJH6f1BhNDAy6E2oz3kB9ezhqUSWfyl6WfO2eQ9oOxg8ib5kmowcE9220FgrW06Tjl75sQrbVEy4dtYWb-OKbfWwaAfFUbn70RoMaClv4x-ilqRcytfUMNsm41hETt9tbJvRnneBQaZ_ZudwxZvOrILOjXVIf5v5vKLhmSnte9d9DScxT5sdACCCYmZxVafzJxfX1Jew1O8b1nh7lsxD62Pd3HCgUQoaMWLRx2EZBZeL-IkWS-IJRtcd_cN0Mg0Rzk9X-OZZ1YomoAZVH6d7Bg1PxlT9205BuvFTxLyvUZ0wk4FHP40bTMd4_PN1Qt9LCSm3fxZCCBSbF8szl_NT-9bC2iY2fvAVCX4ZPeqKiS6RCi4Gf8C-WDOGusQj5SDestBh8wEbWvgP7C0e20pXUzj94vyAlFCEL0rIdopGzerPT5BS7TNqeKtZNnh-dVgUfGsbp81K03LqbW3cx14JAmB6Z_j7QOrwVC-qrzcbgmP1_DG1Q7VsPki8yJ0JUWzoTgHCk8Shbuhqy3uvfvNwdJlf2YkTejKQIIOy8zeSO7Xja65PF8VYaV-wadRchVku1YSOVNjyVOjYWSQAAFJP-BUczh0_pvXw3TXs_S_TEtq50AgNGRiq_Kex4uxeapDzaWjy3xMwod-M5ewz6zuTS2PMRkl57oN904ebC-2fScIKUZDBJ87IcwL7dq1IGaUOdb5FKcB8Bat8nxhNDVGEG_o6dCQmgUwXGt1HyHhrmXnEheLzPLDG3ePIpZz6u4UFb3d92yxqX9_5KSFFRHdM69U6FC01SiPe2OUKwPQ-ISDd_ETIyvNWLsh-NzsEYzs3RIAVOjBxKRDmA7Jboeet6g" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
+  <img src="https://lh3.googleusercontent.com/d/1n5U0vBMseBci4xV5wH8vApeAcRjcyos_" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
   <img src="https://lh3.googleusercontent.com/d/1KCTqGgM2IZDY2nZ1ZTDf9WgX_zhmVB6D" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
 </div>
 
-## React usage
+## Components
 
-### Install the package:
+| HTML tag              | React component |
+| --------------------- | --------------- |
+| `<willba-filter-bar>` | `FilterBar`     |
+
+## Use in a React app
+
+Install:
 
 ```sh
-// with npm
 npm install willba-component-library
-
-// with yarn
+# or
 yarn add willba-component-library
 ```
 
-### Import and use the package:
+Import and render:
 
 ```jsx
-import React from 'react'
-import ReactDOM from 'react-dom'
 import { FilterBar } from 'willba-component-library'
 
-function App() {
+export function MyPage() {
   return (
     <FilterBar
-      redirectUrl={'https://store.vendor.willba.app/'}
-      language={'en'}
-      disableCalendarDates={{
-        disabledDatesByPage: [
-          {
-            offset: 7,
-            page: '/rooms',
-          },
-          {
-            offset: -1,
-            page: '/events',
-          },
-        ],
-      }}
-      mode={'dark'}
-      ageCategories={[
-        {
-          id: '2',
-          name: 'Alle 6 vuotiaat',
-          minVal: 0,
-          sortOrder: 3,
-        },
-        {
-          id: '3',
-          name: '6-16 vuotiaat',
-          minVal: 0,
-          sortOrder: 2,
-        },
-        {
-          id: '1',
-          name: 'Aikuiset',
-          minVal: 1,
-          sortOrder: 1,
-        },
-      ]}
+      redirectUrl="https://store.vendor.willba.app/"
+      language="en"
+      mode="dark"
       tabs={[
-        {
-          label: 'Rooms',
-          path: '/rooms',
-          default: true,
-          order: 2,
-        },
-        {
-          label: 'Events',
-          path: '/events',
-          default: false,
-          order: 1,
-        },
+        { label: 'Rooms', path: '/rooms', default: true, order: 1 },
+        { label: 'Events', path: '/events', default: false, order: 2 },
+      ]}
+      ageCategories={[
+        { id: '1', name: 'Adults', minVal: 1, sortOrder: 1 },
+        { id: '2', name: 'Children', minVal: 0, sortOrder: 2 },
       ]}
       locations={{
         multiSelect: false,
-        disabled: false,
-        data: [
-          {
-            id: 1,
-            label: 'Helsinki',
-            description: 'Capital of Finland',
-            imageUrl: 'https://example.com/helsinki.jpg',
-          },
-        ],
+        data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland' }],
       }}
     />
   )
 }
-
-ReactDOM.render(<App />, document.querySelector('#app'))
 ```
 
-## Script usage
+See [FilterBar props](#filterbar-props) for all available props. TypeScript types are exported as `FilterBarTypes` and `FilterCalendarTypes`.
+
+## Use as a script tag (WordPress, plain HTML, anywhere)
+
+Drop one HTML tag and one script tag onto any page:
 
 ```html
-<div
-  id="will-filter-bar"
-  style="display: flex; justify-content: center; margin-bottom: 50px"
-></div>
+<willba-filter-bar id="will-filter-bar"></willba-filter-bar>
 
-<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.3.27/lib/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.4.0/lib/embed.umd.js"></script>
 
 <script>
-  const renderFilterBar = async () => {
-    try {
-      // Specify domain in order to get the correct filter banner config
-      const domain = 'customer.willba.store'
-      // Set mode to "dark" or "light" for filter bar style color background
-      const mode = 'dark'
-      // Add fallback locale in case navigator.language is not available
-      const fallbackLocale = 'fi'
-      // Set request timeout in milliseconds
-      const requestTimeout = 10000
+  document.getElementById('will-filter-bar').props = {
+    redirectUrl: 'https://store.vendor.willba.app/',
+    language: 'en',
+    mode: 'dark',
+    tabs: [{ label: 'Rooms', path: '/rooms', default: true, order: 1 }],
+    ageCategories: [{ id: '1', name: 'Adults', minVal: 1, sortOrder: 1 }],
+    locations: { multiSelect: false, data: [{ id: 1, label: 'Helsinki' }] },
+  }
+</script>
+```
 
-      const locale = (navigator.language || fallbackLocale).split('-')[0]
-      const url = `https://${domain}/api/services/filter-bar-config?locale=${locale}`
+The custom element mounts inside an isolated Shadow DOM. React, ReactDOM, i18n, and all CSS are bundled inside the script — nothing on the host page can interfere with it, and it cannot interfere with the host page.
 
-      const response = await fetch(url, {
-        method: 'GET',
-        headers: { Accept: 'application/json' },
-        signal: AbortSignal.timeout(requestTimeout),
-      })
+### Passing props
 
-      if (!response.ok) return
+Use the `.props` setter to pass any prop the React component accepts. Re-assigning `.props` re-renders the element. Setting `.props` before the element upgrades is safe — the value is buffered and applied automatically.
 
-      const { filterBarConfig } = await response.json()
-      if (!filterBarConfig) return
+```js
+const el = document.getElementById('will-filter-bar')
+el.props = { ...el.props, language: 'fi' } // switch language at runtime
+```
 
-      const filterBarContainer = document.getElementById('will-filter-bar')
-      const WillbaFilterBar = WillbaComponentLibrary?.FilterBar
+### Loading config from an API
 
-      if (!filterBarContainer || !WillbaFilterBar) return
+Common pattern when the snippet sits on a customer site and the prop config lives on a backend:
 
-      const root = ReactDOM.createRoot(filterBarContainer)
-      root.render(
-        React.createElement(WillbaFilterBar, {
-          ...filterBarConfig,
-          redirectUrl: `https://${domain}`,
-          mode,
-        })
+```html
+<willba-filter-bar id="will-filter-bar"></willba-filter-bar>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.4.0/lib/embed.umd.js"></script>
+<script>
+  ;(async () => {
+    try {
+      const domain = 'customer.willba.store'
+      const locale = (navigator.language || 'fi').split('-')[0]
+      const res = await fetch(
+        `https://${domain}/api/services/filter-bar-config?locale=${locale}`,
+        {
+          headers: { Accept: 'application/json' },
+          signal: AbortSignal.timeout(10000),
+        }
       )
+      if (!res.ok) return
+
+      const { filterBarConfig } = await res.json()
+      if (!filterBarConfig) return
+
+      document.getElementById('will-filter-bar').props = {
+        ...filterBarConfig,
+        redirectUrl: `https://${domain}`,
+        mode: 'dark',
+      }
     } catch (error) {
       console.error('Failed to render filter bar:', error)
     }
-  }
-
-  window.addEventListener('DOMContentLoaded', () => {
-    renderFilterBar()
-  })
+  })()
 </script>
 ```
 
-## Props of FilterBar
+## FilterBar props
 
 | Name                 | Value      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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

@@ -2,4 +2,4 @@ import React from 'react';
 import { FilterBarTypes } from './FilterBarTypes';
 import '../../themes/Default.css';
 import './FilterBar.css';
-export declare const FilterBar: ({ language, ageCategories, redirectUrl, palette, onSubmit, fullWidth, disableCalendarDates, mode, tabs, outerLoading, locations, }: FilterBarTypes) => React.JSX.Element;
+export declare const FilterBar: (props: FilterBarTypes) => React.JSX.Element;

package/lib/components/FilterCalendar/FilterCalendar.d.ts

@@ -2,4 +2,4 @@ import React from 'react';
 import { FilterCalendarTypes } from './FilterCalendarTypes';
 import '../../themes/Default.css';
 import './FilterCalendar.css';
-export default function FilterCalendar({ calendarOffset, language, palette, onSubmit, disableCalendarDates: outerDisableCalendarDates, toggleCalendar, loadingData, setToggleCalendar, requestDates, showFeedback, noActiveSelection, rangeContext: outerRangeContext, }: FilterCalendarTypes): React.JSX.Element;
+export default function FilterCalendar(props: FilterCalendarTypes): React.JSX.Element;

package/lib/core/i18n/I18nProvider.d.ts

@@ -0,0 +1,6 @@
+import React, { PropsWithChildren } from 'react';
+type Props = PropsWithChildren<{
+    language?: string;
+}>;
+export declare const I18nProvider: ({ language, children }: Props) => React.JSX.Element;
+export {};

package/lib/core/i18n/index.d.ts

@@ -0,0 +1 @@
+export { I18nProvider } from './I18nProvider';

package/lib/embed.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FilterBarTypes } from './components/FilterBar/FilterBarTypes';
+declare abstract class WillbaElement<P extends object> extends HTMLElement {
+    private _props;
+    private _root;
+    private _shadow;
+    private _container;
+    set props(value: Partial<P>);
+    get props(): Partial<P>;
+    protected abstract renderReact(props: Partial<P>): React.ReactNode;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _render;
+}
+export declare class WillbaFilterBarElement extends WillbaElement<FilterBarTypes> {
+    protected renderReact(props: Partial<FilterBarTypes>): React.JSX.Element;
+}
+export {};