Wattmore Component Library

What is this?

The @WATTMORE/components-library is a custom node package library of our react components. This is a code repo where we can put any generalized javascript component / function that we might want to share across our applications.

What technologies does it use?

This is first and foremost a react component library. So that being said, most components are either react components or straight up javasript. The components can be wriiten JUST for that, however, this also integrates a component framework for viewing, modifying and testing this components called Storybook.

Storybook

Storybook is a powerful and immensely popular opensource ui development tool for developing components and UI features.

See Storybook docs and this article on why we should use it

Basically, it gives us really intelligent and automatic tooling for free, while our package just bundles with only the minified react components. Story book gives us:

• Auto documentation solely based on the existing code (and any comments we manually add)
• Automatic testing for things like accessibility and interactions
• Easy interaction and unit testing framework
• Theme and device type testing
• UI for viewing components, live tweaking of configurations and powerful search tools (more free documentation)
• component organization through categorization and grouping
• implementation code snippets
• ...more

Usage

Installation

Once you have cloned down the gitlab repository

• Run yarn install

• If this is the first time you are adding to a new project, update your package json with "@wattmore/components-library": "^1.0.1", Or run

    yarn install @wattmore/components-library

  NOTE: Set the version number to the most recent version number (see package.json within components-library) OR you may set the version to * to always get the most recent (be careful of this though because it limits our ability to push breaking changes)

• Import the CSS file into your top level index.jsx

  import '@wattmore/components-library/lib/components.css'

Done!

Local Development

To develop locally you can either develop solely in our package (using storybook) OR you can link this library to your repository. I highly recommend doing both as they are both easy and have their uses.

Running storybook

This is as easy as running yarn storybook This starts up your storybook server and opens a tab in your browser to our localhost port for this application localhost:6006.

Seeing changes in Application

In order to use the components in your application as you development here you have to link your components-library and your repository.

1. Make sure @wattmore/components-library is installed on your repo. It can be particularly easy to just set version to "@wattmore/components-library": "*", just to get started.
2. Next, navigate in your terminal to the components-library repository and from within the repo run:

cd ~/sites/components-library
yarn link

3. Now, navigate to the repository you are using the shared components in (e.g. Dashboard) and run:

cd ~/sites/Wattmore/operate/apps/platform
yarn link "@wattmore/components-library

Now you should be linked up!

4. The final step is that you need to tell the component library to watch file changes and update. So in a seperate terminal tab from your app server, run

cd ~/sites/components-library
yarn dev

Deployment

Deployment is easy, however, for now its a manual process until we can get wattmore to create an NPM account and until we can get to integrating it with some CI to auto bump version and publish when merging to main.

1. Bump package version (found in package.json).
2. Merge branch into main.
3. Run yarn build to get rollup to build our javascript (only grabs components and minifies)
4. yarn publish (if you don't have permissions with current config ping Brett)
5. Bump package version in your applications if necessary.