Living Styleguide - Component Library in react

Available Scripts

In the root directory, you can run:

yarn

Install all development dependencies.

yarn storybook

Run a local storybook with all the components and their stories.

lerna link convert

Link packages into root to have only one node_modules

lerna create <name>

Create new Lerna managed component.

lerna add <dependency>

Adds new depdency to all subsequent packages lerna add (For example styled-components needed to be installed as a dependency)

lerna add <dependency> --peer

Adds dependencies as peerDependencies to all the packages.

lerna run dev

Runs in all the packages the npm dev script.

Conventional Commits, how to commit to trigger CI jobs

The CI jobs evaluate the commit messages, when merged on master. A short summary for conventional commits can be found on Conventional Commits and on Angular Release Messages. The most important types are:

• fix: patches a bug in your codebase (this correlates with PATCH in semantic versioning, x.x.1 -> x.x.2).
• feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in semantic versioning x.1.x -> x.2.x).
• BREAKING CHANGE: or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in semantic versioning 1.x.x -> 2.x.x). A BREAKING CHANGE can be part of commits of any type.

An example commit message has the following logic:

<type>(<optional scope>): <short summary>
  │         │                   │
  │         │                   └─⫸ Summary in present tense. Not capitalized. No period at the end.
  │         │
  │         └─⫸ Optional Commit Scope: ls-card|ls-list|ls-XXXX
  │
  └─⫸ Commit Type: build|ci|docs|feat|fix|perf|refactor|style|test

Adding a new Component

• Copy existing component.
• Adjust package.json of new component and add correct type file (name of the .d.js).
• Run lerna link convert in root
• run yarnto generate new yarn.lock

Learn More

• Lerna Concepts
• React.js
• Storybook