NIDS Web

Niduu Design System Web is a NPM package for using our company web components.

How it works

NIDS Web is composed by components divided into packages. Each package has its own repository, which is configured to automate commits and releases.

How to create package

1. First, you need to add the submodule:

   git submodule add {git-url}

2. You need to initiate the npm inside submodule:

   npm init --scope=@niduu

3. Install dependencies:

   npm i -D standard-version husky @commitlint/{config-conventional,cli} commitizen

4. Create a file named "commitlint.config.js" at root of the package and add the command them:

   module.exports = {extends: ['@commitlint/config-conventional']}

5. Add this configuration to package.json:

   "config": {
     "commitizen": {
       "path": "cz-conventional-changelog"
     }
   },
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }

6. Install gulp and gulp based packages to config your build:

   npm i -D gulp gulp-concat gulp-clean-css gulp-sass

   Packages gulp-clean-css and gulp-sass are optional

7. Create gulpfile.js at root of package and config them:

   const gulp = require('gulp');
   const concat = require('gulp-concat');
   const gulpSass = require('gulp-sass');
      
   gulp.task('scripts', () => {
     return gulp.src(['src/js/*.js'])
       .pipe(concat('bundle.js'))
       .pipe(gulp.dest('dist/js'));
   });
      
   gulp.task('styles', () => {
     return gulp.src(['src/scss/*.scss'])
       .pipe(gulpSass({outputStyle: 'compressed'}).on('error', gulpSass.logError))
       .pipe(concat('styles.css'))
       .pipe(gulp.dest('dist/css'));
   });
      
   gulp.task('default', gulp.parallel('styles'));
   

8. Config your scripts at package.json:

   "scripts": {
     "build": "gulp",
     "commit": "git-cz",
     "prerelease": "git checkout master && git pull origin master && npm i && git add .",
     "release": "standard-version -a",
     "postrelease": "git push --follow-tags origin master",
     "ci:validate": "rm -rf node_modules && npm ci",
     "prepublishOnly": "npm run ci:validate"
    }

9. Add file named ".gitignore" and enter the command inside them:

   node_modules
   .idea/

How to commit

1. To commit, enter the command:

   npm run commit

   You need to add changes before

2. Select update type

   • fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in semantic versioning).
   • feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in semantic versioning).
   • BREAKING CHANGE: a commit that has the text BREAKING CHANGE: at the beginning of its optional body or footer section introduces a breaking API change (correlating with MAJOR in semantic versioning). A BREAKING CHANGE can be part of commits of any type.

   For more information, visit: Conventional Commits

3. Type update scope (component or file)

4. Type update description

How to release

To release, enter the command:

npm run release

How to publish

To publish, enter the command

npm publish --access public

Done! Now the updates are available on the latest version at NPM.