willba-component-library 0.4.1 → 0.4.3

package/README.md

@@ -1,126 +1,43 @@
 ## Description
 
-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.
+Willba Filter Bar is a search component for booking and event sites. Drop it onto any website with two lines of HTML — it pulls its settings from the provided domain and renders ready to use.
 
 <div style="display: flex; gap: 20px;">
   <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>
 
-## Components
+## Adding to your site
 
-| HTML tag              | React component |
-| --------------------- | --------------- |
-| `<willba-filter-bar>` | `FilterBar`     |
-
-## Use in a React app
-
-Install:
-
-```sh
-npm install willba-component-library
-# or
-yarn add willba-component-library
-```
-
-Import and render:
-
-```jsx
-import { FilterBar } from 'willba-component-library'
-
-export function MyPage() {
-  return (
-    <FilterBar
-      redirectUrl="https://store.vendor.willba.app/"
-      language="en"
-      mode="dark"
-      tabs={[
-        { 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,
-        data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland' }],
-      }}
-    />
-  )
-}
-```
-
-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)
-
-Two lines. Set `domain` to the host that serves the filter bar config — the element fetches it on mount and renders.
+Paste these two lines into any page — WordPress, plain HTML, anywhere. Set `domain` to your store URL, and the filter bar will load its settings and appear ready to use.
 
 ```html
 <willba-filter-bar
   domain="customer.willba.store"
   mode="dark"
 ></willba-filter-bar>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.4.1/lib/embed.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.4.3/lib/embed.umd.js"></script>
 ```
 
-The element auto-fetches `https://{domain}/api/services/filter-bar-config?locale=...` and renders 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.
+The filter bar is fully self-contained and runs isolated from the rest of the page — your theme, plugins, and other scripts won't interfere with it, and it won't affect them.
 
 ### Available HTML attributes
 
-| Attribute         | Purpose                                                                       | Default                              |
-| ----------------- | ----------------------------------------------------------------------------- | ------------------------------------ |
-| `domain`          | Host that serves the filter bar config API. Triggers auto-fetch when present. | (none — element waits for `.props=`) |
-| `mode`            | `"dark"` or `"light"`.                                                        | (whatever the API returns)           |
-| `language`        | `"en"` or `"fi"`.                                                             | `navigator.language`                 |
-| `fallback-locale` | Locale to use if `navigator.language` is unavailable.                         | `"fi"`                               |
-| `redirect-url`    | URL to redirect to after submit.                                              | `https://{domain}`                   |
-
-Protocol is auto-detected: `http://` for `localhost` / `127.0.0.1` hosts, `https://` everywhere else.
+| Attribute    | Purpose                                                                               | Default       |
+| ------------ | ------------------------------------------------------------------------------------- | ------------- |
+| `domain`     | Host that serves the filter bar settings.                                             | (required)    |
+| `mode`       | `"dark"` or `"light"`.                                                                | `"light"`     |
+| `full-width` | Add this attribute to make the filter bar stretch to the full width of its container. | not stretched |
 
-### Configuration precedence
+### Positioning on the page
 
-When multiple sources set the same prop, the higher one wins:
-
-```
-API response   →   HTML attributes   →   el.props (programmatic)
-   (lowest)                                  (highest)
-```
-
-So a customer's API can ship sensible defaults, and a single embed can override `mode` or `language` per page without touching the API.
-
-### Programmatic control (advanced)
-
-For full programmatic control — including complex props like `tabs`, `locations`, `ageCategories`, `palette` that don't fit in HTML attributes — set `.props` directly:
+You can wrap the element however you like — it behaves like any block-level HTML element. Use `style` or your own CSS class on `<willba-filter-bar>` to control margin, alignment, max-width, etc.
 
 ```html
-<willba-filter-bar id="fb"></willba-filter-bar>
-<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.4.1/lib/embed.umd.js"></script>
-<script>
-  document.getElementById('fb').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>
+<willba-filter-bar
+  domain="customer.willba.store"
+  style="display: block; max-width: 900px; margin: 40px auto;"
+></willba-filter-bar>
 ```
 
-Re-assigning `.props` re-renders the element. Setting `.props` before the element upgrades is safe — the value is buffered and applied automatically. To merge with existing props instead of replacing, spread first: `el.props = { ...el.props, language: 'fi' }`.
-
-## FilterBar props
-
-| Name                 | Value      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| -------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| redirectUrl          | `"string"` | Specifies the base URL to which the component should redirect after submitting the filters. For example: `'https://store.vendor.willba.app/'`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| language             | `"string"` | Specifies the language of the filter bar. Available options are Finnish ("fi") and English ("en"). For example: `'en'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| palette              | `{}`       | The palette defines the colors of the filter bar. Override the colors using the following format: `{ primary: string, secondary: string, error: string }`. For example: `{ primary: '#2a5a44', secondary: '#2a5a44', error: '#ff0000' }`                                                                                                                                                                                                                                                                                                                                                 |
-| disableCalendarDates | `{}`       | Disable dates on the calendar by page using the following format: `{ disabledDatesByPage: [{ offset: number, page: string }] }`. For example: `{ disabledDatesByPage: [{ offset: 7, page: '/rooms' }, { offset: -1, page: '/events' }] }`                                                                                                                                                                                                                                                                                                                                                |
-| mode                 | `"string"` | Specify the color theme for the filter bar tabs as either light or dark using the following format: `'dark'` or `'light'`                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| ageCategories        | `[{}]`     | The ageCategories prop will determine the types of guests that can be selected. Specify the age categories for guests using the following format: `[{ id: string, name: string, minVal: number, sortOrder: number }]`. For example: `[{ id: '1', name: 'Aikuiset', minVal: 1, sortOrder: 1 }]`                                                                                                                                                                                                                                                                                           |
-| fullWidth            | `true`     | Specify whether the filter bar width should be dynamic or fixed.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| tabs                 | `[{}]`     | Manage the filter bar tabs using the following format: `[{path: string, default: boolean, order: number, label?: string}]`. The label should be pre-localized. For example: `[{ path: '/rooms', default: true, order: 2, label: 'Rooms' }]`                                                                                                                                                                                                                                                                                                                                              |
-| locations            | `{}`       | Configures location filter. Format: `{ multiSelect: boolean, disabled?: boolean, data: Location[] }` where Location = `{ id: number, label: string, description?: string \| null, imageUrl?: string \| null }`. The label and description should be pre-localized. `multiSelect` enables multi-selection, `disabled` disables the filter, `description` shows under title, `imageUrl` displays location image. Example: `{ multiSelect: false, disabled: false, data: [{ id: 1, label: 'Helsinki', description: 'Capital of Finland', imageUrl: 'https://example.com/helsinki.jpg' }] }` |
+Note: only outer-layout styles (margin, padding, display, width, max-width, alignment) affect the element. The filter bar's internal styling is sealed and cannot be customized from the host page.

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

@@ -2,4 +2,5 @@ import React from 'react';
 import { FilterCalendarTypes } from './FilterCalendarTypes';
 import '../../themes/Default.css';
 import './FilterCalendar.css';
-export default function FilterCalendar(props: FilterCalendarTypes): React.JSX.Element;
+declare const FilterCalendar: (props: FilterCalendarTypes) => React.JSX.Element;
+export default FilterCalendar;

package/lib/core/components/calendar/hooks/useCalendarLoadingSpinner.d.ts

@@ -1,5 +1,7 @@
+import { RefObject } from 'react';
 type Props = {
     loadingData?: boolean;
+    rootRef?: RefObject<HTMLElement | null>;
 };
-export declare const useCalendarLoadingSpinner: ({ loadingData }: Props) => void;
+export declare const useCalendarLoadingSpinner: ({ loadingData, rootRef }: Props) => void;
 export {};

package/lib/core/components/calendar/hooks/useCalendarTooltips.d.ts

@@ -1,5 +1,7 @@
+import { RefObject } from 'react';
 type Props = {
     showFeedback?: boolean;
+    rootRef?: RefObject<HTMLElement | null>;
 };
-export declare const useCalendarTooltips: ({ showFeedback }: Props) => void;
+export declare const useCalendarTooltips: ({ showFeedback, rootRef }: Props) => void;
 export {};

package/lib/core/utils/getQueryRoot.d.ts

@@ -0,0 +1 @@
+export declare const getQueryRoot: (el: Element | null | undefined) => Document | ShadowRoot;

package/lib/embed.d.ts

@@ -1,21 +1 @@
-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> {
-    private _autoFetchTriggered;
-    protected renderReact(props: Partial<FilterBarTypes>): React.JSX.Element;
-    connectedCallback(): void;
-    private _loadConfigFromApi;
-}
 export {};