cb-ui-library-storybook

Cloudbeds: ( 💼 ui-library & 📚 Storybookjs )

The main purpose of this repository is for the development and distribution of Cloudbeds Presentational components and global styles through the @cloudbeds private npm registry. Storybook is an open source tool we use for building our ui-library components and styles in isolation. It provides Cloudbeds Designers and User Experience professionals with the opportunity to review the look and feel of components, while also providing Developers documentation on how to use the components.

Libraries and Tooling

Current Dependencies and Baseline Associations

---

packages	versions	expectation
React	^17.0.2	your project includes
Chakra-UI/react	1.6.4	will be added to your node_module
Framer-Motion	4.1.17 (exact)	will be added to your node_module
emotion/react	^11.4.1	CSS-in-JS
TypeScript	^ 4.4.2	JavaScript compatible
StorybookJs	^6.2.7	React Specific

Version Issues

• Chakra-UI: ( latest version >=1.7.0), has breaking changes with "css" prop. Please see Chakra-ui issue #5045

• Framer-Motion ( latest version >=4.1.17, has breaking changes related to React using .mjs files. Please see framer-motion issue #1307

Installation

The usual npm i should work as expected.

In case you encounter npm ERR! Conflicting peer dependency run

npm i --force

Stories

MDX

For more elaborate documentation you can create a Component.stories.mdx file

import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
import * as CbMenuStories from './CbMenu.stories';

<Meta title="Cloudbeds/Components/Menu" />

<Canvas>
  <Story name="with args" story={CbMenuStories.WithArgs} />
</Canvas>
<ArgsTable />

Full canvas view

By default, a story canvas has padding for a nicer view. For components that span through the viewport (e.g. Sidebar, Navbar) you can add the layout: 'fullscreen story parameter.

See https://storybook.js.org/docs/react/configure/story-layout

Builds

---

Builds and Deploys of the ui-library are facilitated through bit-bucket pipeline, which builds and publishes a production version to our private Cloudbeds NPM registry.

@cloudbeds/ui-library: NPM VERSION

How to Contribute

---

We do not submit directly to the Main( master) of the ui-library. Instead, we create branches, using a Jira work reference and the type of task to be completed. The type of task is based on the concept of Conventional Commits, which triggers specific Semantic Versions.

Typical Scenario

Sarah has been working on a Jira Ticket AR-123 for the current sprint, which involves adding rollover functionality to a button group. At the end of each day, she updates her branch AR-123-menu-popover.

 git commit -m"AR-123 : completed update of the global styled darkmode..."

Eventually Sarah finishes the work need to complete this task, and she is ready to issue a pull request, which will bump up the current version of the @cloudbeds/ui-library when approved.

 git commit -m"feat: AR-123  : completed update of the global styled darkmode..."

Brief explanation of task types:

Example @cloudbeds/ui-library is at version 1.1.0

• BREAKING CHANGE: is a MAJOR change : 1.1.0 to 2.1.0
  • A version which makes incompatible API changes often denoted as Breaking Changes
    • git commit -m "BREAKING CHANGE: AR-123 converted all component..."
• feat: is a MINOR change : 1.1.0 to 1.2.0
  • A version which adds functionality in a backwards compatible manner Most frequent changes
    • git commit -m "feat: AR-123 updates the ..."
• fix: is a PATCH change : 1.1.0 to 1.1.1
  • A version which adds functionality in a backwards compatible manner Most frequent changes
    • git commit -m "fix: AR-123 removes bug from ..."

more reference can be reviewed in the documentation @Conventional Commits

Usage

---

Consumers of the ui-library should do so through including it as a dependency in their project's package.json.

Package.json

  ...
  dependency: {
    ...
    "@cloudbeds/ui-library": "^1.0.3",
  }

Local Development with Cloudbeds MFD repos

---

While the components and styles within the Cloudbeds ui-library are intended to be consumed by other Cloudbeds frontend efforts, all development work is contained within the repository. For optimal development to take place, the constant changes of styles and components need to appear in a "hot module reloading" fashion with other repositories.

A Local Dev repository has been created for this exact purpose. Instructions for assembling a local integrated local development environment can be found on the confluence page How to Develop in the ui-library.