Description

Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an npm package, or can be used directly through scripts.

React usage

Install the package:

// with npm
npm install willba-component-library

// with yarn
yarn add willba-component-library

Import and use the package:

import React from 'react'
import ReactDOM from 'react-dom'
import { FilterBar } from 'willba-component-library'

function App() {
  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,
        },
      ]}
      tabs={[
        {
          label: 'Rooms',
          path: '/rooms',
          default: true,
          order: 2,
        },
        {
          label: 'Events',
          path: '/events',
          default: false,
          order: 1,
        },
      ]}
      locations={{
        multiSelect: false,
        disabled: false,
        data: [
          {
            id: 1,
            label: 'Helsinki',
            description: 'Capital of Finland',
            imageUrl: 'https://example.com/helsinki.jpg',
          },
        ],
      }}
    />
  )
}

ReactDOM.render(<App />, document.querySelector('#app'))

Script usage

<div
  id="will-filter-bar"
  style="display: flex; justify-content: center; margin-bottom: 50px"
></div>

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.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

      const locale = (navigator.language || fallbackLocale).split('-')[0]
      const url = `https://${domain}/api/services/filter-bar-config?locale=${locale}`

      const response = await fetch(url, {
        method: 'GET',
        headers: { Accept: 'application/json' },
        signal: AbortSignal.timeout(requestTimeout),
      })

      if (!response.ok) return

      const { filterBarConfig } = await response.json()
      if (!filterBarConfig) return

      const filterBarContainer = document.getElementById('will-filter-bar')
      const WillbaFilterBar = WillbaComponentLibrary?.FilterBar

      if (!filterBarContainer || !WillbaFilterBar) return

      const root = ReactDOM.createRoot(filterBarContainer)
      root.render(
        React.createElement(WillbaFilterBar, {
          ...filterBarConfig,
          redirectUrl: `https://${domain}`,
          mode,
        })
      )
    } catch (error) {
      console.error('Failed to render filter bar:', error)
    }
  }

  window.addEventListener('DOMContentLoaded', () => {
    renderFilterBar()
  })
</script>

Props of FilterBar

| 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' }] } |