node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org ยป


Deskbookers shared components



There are two main source folders

  • components contains self-contained components with its own css-module, test, source file and story.
  • styles contains the styleguide + shared variables that both styleguide and components should use.

This component library will be used by most of deskbookers projects. So to ensure sure ensure maximum quality and reliability, make sure to include tests for all components you create and be sure to cover all tests.

Tests are handled by Jest yarn test (snapshot testing is available to use) and there is code coverage available to use as well through yarn coverage.


Previewing changes you made into this project will be done through react-storybook, you can run it by doing:

 $ yarn storybook

This will create a new dev server at localhost:9001 with hot-reload enabled.

Commit messages

Make sure you squash your PR before merging into master/develop following the next convention:

  <type>(<scope>): <subject>


Must be one of the following:

  • feat: A new feature
  • fix: A bug fix
  • docs: Documentation only changes
  • style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  • refactor: A code change that neither fixes a bug nor adds a feature
  • perf: A code change that improves performance
  • test: Adding missing or correcting existing tests
  • chore: Changes to the build process or auxiliary tools and libraries such as documentation generation


The scope could be anything specifying place of the commit change. For example component, component, etc...

You can use * when the change affects more than a single scope.


The subject contains succinct description of the change:

  • use the imperative, present tense: "change" not "changed" nor "changes"
  • don't capitalize first letter
  • no dot (.) at the end


Use yarn build to transpile the code into the dist folder. You'll end up with a components.js file and with a styleguide.css file which will contain all the styles of the components + the styleguide.

Please make sure to follow semver when updating the package.json:version field.

 Start with: 1.0.0
 Fix a bug? 1.0.1
 Add a feature? 1.1.0
 Backwards incompatible? 2.0.0

Recommended workflow

  Make changes
  Commit those changes
  Make sure your tests are passing
  Bump version in package.json
  `yarn changelog`
  Commit package.json and files

The reason why you should commit and tag after yarn changelog is that the CHANGELOG should be included in the new release, hence gitRawCommitsOpts.from defaults to the latest semver tag.