npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ba-js-common-header

v1.0.3

Published

A React-based shared header component

Downloads

190

Readme

Bookassist Common Header

A React-based shared header component

Installation

yarn add ba-js-common-header

Usage

// React

import { Header } from 'ba-js-common-header/dist/ba-js-common-header.es.js'

function App(props) {
    return <Header {...props} />
}
// website

<div id="header"></div>

// es5
<script src="https://unpkg.com/ba-js-common-header/dist/ba-js-common-header.umd.js"></script>
// baJsHeader global now available
<script>
  const { renderHeader } = baJsHeader
  renderHeader(document.querySelector('#header'), {
    // props
  })
</script>

// ES Modules
<script type="module">
  import { renderHeader } from 'https://unpkg.com/ba-js-common-header/dist/ba-js-common-header.es.js'
  renderHeader(document.querySelector('#header'), {
    // props
  })
</script>

Header Props

| Prop | Type | Description | Required | | :--------------------- | :---- | :--------------------------------- | :------- | | config | url | header configuration feed endpoint | Yes | | userInfo | obj | userInfo object | Yes | | userLanguage | str | default user language | No | | handleLanguageChange | fn | language selector callback | No | | handleHotelChange | fn | hotel selector callback | No | | i18nFeed | url | Jed i18n endpoint | No |

config (required)

The header configuration feed endpoint. See below for structure

userInfo (required)

The user state

{
    username, // string (required)
    hotelId, // integer (optional)
    guideId, // integer (optional)
    group, // string (optional)
}

The username is used by the header for display purposes. The hotel and guide ids are to provide for an initially selected hotel

userLanguage (optional)

The initially selected language, provided as an ISO language code (defaults to 'en')

handleLanguageChange (optional)

Callback fired on selection of a language. The callback is passed the new language code

const cb = code => {
    console.log(`The new language code is ${code}`)
}

handleHotelChange (optional)

Callback fired on selection of a hotel. The callback is passed an object containing name, hotel id and guide id

const cb = ({ name, hotelId, guideId }) => {
    console.log({ name, hotelId, guideId })
}

i18nFeed (optional)

Endpoint for Jed-based i18n feed. The url may contain a '{0}' placeholder for the current language code

const i18nFeed =
    'https://www.bookassist.com/rest/api/v1/i18n/jed/bookassist.i18n.HotelAdminRB/{0}'

Feed Structures

Config Feed (required)

The config feed is an object with 2 required properties:

const config = {
    titleBar, // required object
    menuBar, // required array
}

titleBar (required)

The titleBar property provides configuration details for the 6 available widgets in the upper half of the header (a given widget will be rendered if configuration for it exists). The property value is an object with 6 possible properties:

{
    help, // optional object
    languageSelector, // optional object
    notifications, // optional object
    product, // required object
    propertySelector, // optional object
    user, // required object
}
help (optional)

The help property provides link information for the help widget. The property value is an object with 2 required properties:

{
  label: 'Help Center', // required string
  href: 'https://go.bookassist.org/en/knowledge/booking-engine', // required string
}
languageSelector (optional)

The languageSelector property provides a language widget label and an array of available languages. The property value is an object with 2 required properties:


{
  label: 'Language', // required string
  children: [ // required array
    {
      code: 'en', // required string
    },
    {
      code: 'es', // required string
      label: 'Español', // optional string
    },
    {
      code: 'fr', // required string
    },
    // ...
  ],
}

The children array is a list of language objects. A language object consists of a required language code property and an optional label property that can be used to override the name provided by Intl.DisplayNames

notifications (optional)
{
}
product (required)

The product property denotes the current product. The property value is an object with 2 required properties:

{
  name: 'Booking Engine', // required string
  href: '/hotel_admin/spl.jsp', // required string
}
propertySelector (optional)

The propertySelector property is used to provide the list of selectable hotels. The property value is an object with 2 required properties:

{
    type, // required string (one of 'data' or 'fetch')
    items, // required array of hotels or endpoint providing said array
}

The items property value is an array of hotels or an endpoint returning such an array. Individual hotels are specified as 2-item arrays containing the hotel name and a string consisting of the hotel and guide ids separated by an underscore.

const hotels = [
    ['ADLER HOTEL', '3724_802'],
    ['Adria Hotel Prague', '1465_802'],
    ['Agroturismo Can Toni Xumeu', '3033_102'],
    // ...
]
user (required)

The user property denotes a set of user-related links. The property value is an object with 2 required properties:

{
  label: 'Profile', // required string
  children: [ // required array
    {
      label: 'Maintain Users', // required string
      href: '/hotel_admin/maintain_users.jsp', // required string
    },
    {
      label: 'Change Password', // required string
      href: '/hotel_admin/login.jsp?resetpass', // required string
    },
    {
      label: 'Log Out', // required string
      href: '/hotel_admin/logout.jsp', // required string
    },
  ],
}

The children property is a list of link objects, each with 2 required properties (label and href)

menuBar (requred)

The menuBar property provides configuration details for the lower half of the header. The property value is a flat array of menu item objects:

const menuBar = [
    {
        id, // required string
        parentId, // required for nested menu items
        label, // required string
        href, // optional link (string)
        group, // optional header for menu item grouping (string)
        premium: { // optional object outlining premium status
            value: true, // required boolean
            locked: true, // required boolean
        },
    },
    // ...
]

i18n

i18n can be optionally provided via the i18nFeed prop. The header uses Jed. If an i18n feed is specified all header labels will be treated as i18n keys and run through Jed for translation.