Usage

• Architecture
• Development
• Build

Architecture

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.

Development

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>

Type

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

Scope

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.

Subject

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

Build

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 CHANGELOG.md files
  Tag
  Push

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.