willba-component-library

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'}
      calendarOffset={{
        rooms: 7,
        events: -1,
      }}
      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={[
        {
          path: '/rooms',
          default: true,
          order: 2,
        },
        {
          path: '/events',
          default: false,
          order: 1,
        },
      ]}
    />
  )
}

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/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.9/lib/index.umd.js"></script>

<script>
  const filterBarElement = React.createElement
  const filterBarContainer = document.getElementById('will-filter-bar')
  const WillFilterBar = WillbaComponentLibrary.FilterBar
  const root = ReactDOM.createRoot(filterBarContainer)

  root.render(
    filterBarElement(WillFilterBar, {
      redirectUrl: 'https://store.vendor.willba.app/',
      language: 'en',
      palette: {
        primary: '#2a5a44',
        secondary: '#2a5a44',
      },
      calendarOffset: {
        rooms: 7,
        events: -1,
      },
      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: [
        {
          path: '/rooms',
          default: true,
          order: 2,
        },
        {
          path: '/events',
          default: false,
          order: 1,
        },
      ],
    })
  )
</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: "fi" or "en".
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: 'Adults', minVal: 1, sortOrder: 1 }]
palette	{}	The palette defines the primary and secondary colors of the filter bar. Override the colors using the following format: { primary: string, secondary: string }. For example: { primary: '#2a5a44', secondary: '#2a5a44' }
calendarOffset	{}	Disable dates on the calendar starting from today either forward or backward using the following format: { rooms: number, events: number }. For example: { rooms: 7, events: -1 }
fullWidth	true	Specify whether the filter bar width should be dynamic or fixed.
mode	"string"	Specify the color theme for the filter bar tabs as either light or dark using the following format: "light"
tabs	[{}]	Manage the filter bar tabs using the following format: [{path: string, default: boolean, order: number, label: { en: string, fi: string }}]. For example: [{ path: '/rooms', default: true, order: 2, label: { en: "Name en", fi: "Name fi" }}]