A place to keep all non-complex files, for DRY purposes. We have:
- Our logo in different versions.
- Our color palette.
- Linter configs.
For a npm project, just add this line to your devDependencies:
"kobo-common": "git@github.com:kobotoolbox/kobo-common.git#semver:1.2.3",
To pick a correct version, please remember that:
majoris not expected to change anytime soonminorchanges anytime an existing resource was modifiedpatchchanges anytime a new resource was added
Depending on your setup you might need to use HTTPS url instead: https://github.com/kobotoolbox/kobo-common.git.
For linter configs you need to extend the ones we have. You can simply create a file with one property:
// .eslintrc.js
module.exports = {
extends: './node_modules/kobo-common/src/configs/.eslintrc.js',
};// .stylelintrc.js
module.exports = {
extends: './node_modules/kobo-common/src/configs/.stylelintrc.js',
};// .prettierrc.js
module.exports = {
...require('./node_modules/kobo-common/src/configs/.prettierrc.js'),
};For .editorconfig unfortunately there is no easy way. You can either create a postinstall script that would copy it to your repo root, or just copy&paste the content manually.
NOTE: you might need to install @typescript-eslint/parser from peerDependencies in your project to enable linting.
The color palette file requires a relative path to work, e.g. @use "../../node_modules/kobo-common/src/styles/colors";, but to make it easier for you, try using these steps instead:
- Adding the package to
load-pathslike so:--load-path=node_modules/kobo-common/src/styles - Referencing it in your file:
@use "colors"; - Using the variable:
color: colors.$kobo-blue;
We keep all usable stuff in src directory.
We are relying on version tag heavily, so there are safety measures configured:
- A
pre-commithook will check (based on commited files) if version frompackage.jsonfile is correct - it compares the proposed version with the latest pushed tag. - A
post-commithook will add (and push) a version tag found inpackage.jsonfile.