@tourstream/mph-components-lib

Meeting Point Hotels - Component Library

This package contains components which are used by the new Meeting Point StageHotel Pages.

Live preview of the component library can be found here.

Installation

Install the component library to the brand frontend app:

npm i -S bitbucket:tourstream/mph-components-lib

You can also link a local version of this package directly directly into your frontend app. Assuming that the local versions is on the same level like your frontend app:

npm link ../mph-components-lib

Developer Notes

Don't forget to create a build before pushing to bitbucket:

npm run build

For continuous building during developement:

npm run build:watch

Storybook

Storybook has been used to document the components. You can preview your components status via stories with live watch mode of storybook. In order to make storybook run in watch mode, run following command

npm run storybook

This will run storybook in localhost:9001, ready for local preview. When you push your commits, CI will run build and if build is successfull, will deploy storybook into mph-global projects firebase hosting automatically.

You can access latest documentation here: https://mph-global.firebaseapp.com

How it works

Stories are js files describing a use behaviour. For example if a component has multiple styles or features a story can has more than one example. Each story js file has to be added into a stories folder near the ui components that needed to be documented. In order to view it on output, this js file need to be loaded by storybook. This files are imported in \.storybook\config.js. For more about storybook please check here.

How storybook CI works

Each time a new commit is done it triggers a build on Bamboo server. If tests are passed and build is successful, Storybook artifact is also build by storybook:build command. Resulting artifact is deployed to firebase hosting: mph-global https://mph-global.firebaseapp.com/