Credimi-frontend-components NPM

Credimi Frontend Components

Credimi Frontend Components is a UI components factory, it tries to accomplish these goals:

Have a single repository as a UI component playground
Share components and styling configurations throught different projects
Simplify credimi-public-website that contains both components and web pages
Avoid enviroments constraints tightly coupled to the UI component (packages versions ecc)

Monorepos: Lerna

A codebase organized by monorepos helps tackling several versioned packages in a single repository. This approach simplifies repositories management throught different projects.

In fact one of the issue to solve is how to share a single component maintaining consistency.

To do that the project uses Lerna

The Lerna README.md said:

Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.

Getting Started

The project is based on the UI Development enviroment Storybook and Lerna multi-package manager therefore let's start by installing Storybook and Lerna.

Lerna should be globally installed

Install dependencies and run in development

First of all the project needs to download and link the packages together. To do that Lerna provides lerna bootstrap command. For more info see: @lerna/bootstrap

Run:

$ yarn bootstrapp && yarn dev

The project contains a lot of components and their relative node_modules, this structure can create a duplicated dependencies. To mitigate the duplicated dependencies proliferation through components, Lerna offers the Hoisting feature.

Lerna can reduce the time and space requirements for numerous copies of packages in development and build environments, by "hoisting" shared dependencies up to the topmost, Lerna-project-level node_modules directory

Lerna hoisting

Npm Configuration

In order to publish packages and to share it, the project uses credimi-npm - a private npm registry. The first step is to login with your credentials. Follow the instructions to log in to JFrog artifactory credimi

Component structure

Every component have to live inside the packages folder (this is the folder for Lerna scope. See lerna.json file configuration).

Basically every component has one or both of the below files:

componentName.jsx
componentName.module.scss

nb every component must have only one scss imported inside the jsx

The component folder structure should be like that:

packages/
├── foo-pkg
│   └── package.json
│   └── webpack.config.js
│   └── index.js
│   └── foo-pkg.jsx
│   └── foo-pkg.module.scss
│   └── dist
│       └── index.js
└── bar-pkg

The folder has a package.json file that contains the packages dependencies plus npm scripts for transpiling purpose.

index.js you have to export the component in order to use that inside storybook.
dist folder contains builded version of the component

This project provides a development enviroment as well as each component has to be transpiled and preprocessed to make the component export easy and without worring about portability issues.

Create a new component

It can be painful create a new component from scratch. To avoid the manually setup of the component, you can create one with create-component script.

Run:

$ cd utils/create-component && COMPONENT='<componentName>' yarn createComponent

This can bootstrap your component with the essential file that you need to start!

N.B. The final name of the component has to be under @credimi. See also npm scope

Prepare to publish

Before publishing the component, it has to be transpiled.

Run yarn build. The script run the webpack task and preprocess your components.

This command use lerna run <script> that checks inside every component package.json and run the matched script for each.

Build a single component

It is possible transpile a single component running the below command:

npm_config_component=<component_name> yarn run transpile-component

Publish a single component

There are more than one way to publish a single component.

By Component updated version

Explicitly publish packages where the latest version is not present in the registry:

lerna publish from-package

By git tag

Explicitly publish packages tagged in the current commit:

lerna publish from-git

Publish components

When the build phase is finished, it's time to publish your component - this command publish all the packages updated since the last release.

Run lerna publish

or in order to summarize all the main commands needed (build & publish)

Run yarn lerna-publish command

Commands launched are:

Build your component yarn build
Add the new files and commit git add -A && git commit -am 'builds components'
Publish lerna publish

N.B Lerna publish works from the master branch by default.
It is considered a best-practice to limit lerna version to the primary branch alone.

Git tag

Every time we publish packages with lerna publish, the command executes commit and tag the commit. At the end it performs a git push to the remote repository.

We are using the Independent mode in order to decide for each component which tag is going to be used in the new release.

Visual regression test

See how to use backstop on their github page Backstop is locally installed to use its command you must use this syntax: BS=test yarn backstop where BS is the command you want backstop to run