# React Ui-kit

React component library with all the basic components to build a full-fledged website and application. It is integrated with integration and accessibility tests using storybook.js and jest.

Ui-kit Application

Installation

Requirements:

• NodeJS 16+ is required.

• Install the dependencies using npm.

Local server

Run npm run start or npm run storybook for a dev server. Navigate to http://localhost:6000/. The app will automatically reload if you change any of the source files.

Code scaffolding

--To do

Build

--To do

Further help

--To do

Commit Lint

Format

type(scope): subject
<blank line>
body
<blank line>
footer

Required Fields

1. Type is required with predefined type enums.
2. Scope is required with predefined module in the system. Scope should be in camel case.
3. Subject is the commit message. This is a required field and should be in lower case where the initial letter is capital
4. Body is optional only for specific types of commits*.
5. Footer is optional only for specific types of commits*.

*Specific types of commits:

1. Code Review commits: Code Review commits contain "CODE REVIEW" in the subject line.
2. Code Smell commits: Code Smell commits contain "CODE SMELL" in the subject line.

Note

1. If the commit is a code review commit, then adding a string "CODE REVIEW" in the subject line will make body and footer optional and those can be exclude for the code review commit. The header rules are applicable.
2. If the commit is a code smell commit, then adding a string "CODE SMELL" in the subject line will make body and footer optional and those can be exclude for the code smell commit. The header rules are applicable
3. "WIP" commits are ignored from the commit lint rules and can be committed without following the commit rules for header, body and footer.

Type Enums

1. build
2. chore
3. enh
4. docs
5. feat
6. fix
7. perf
8. refactor
9. revert
10. style

Scope Enums

1. app
2. component
3. settings
4. documentation

Whenever a new module is added to the application, add the module name or the specific feature inside a module as the scope in conventionlCommit.json file. And update the readme with the latest scopes

Examples of a valid commit message

1. fix(component): fixed the accesibility test failures

   changed the color code for disbaled color

   closes #AM-1234

2. WIP: round image with dark borders.
3. feat(component): navigation right menu

   added component, tests and css for navigation

   closes #AM-1234

4. feat(component): CODE REVIEW navigation right menu

ESLint

Rules have been setup with ESLint to enforce additional structural and syntax rules.

1. npm runb lint to run linting on all typescript files.
2. npm run lint:fix to run linting on all typescript files and fix all fixable issues.

Pre-commit hook for running lint and fixing issues on the staged files is present.

Code formatting

Workspace use Prettier to ensure consistent code formatting.

To install it, run ext install esbenp.prettier-vscode or download it from Extensions Marketplace (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

Make sure to configure Prettier, so it formats changed files on save. If you are not sure how to do that, check this article (https://www.educative.io/answers/how-to-set-up-prettier-and-automatic-formatting-on-vs-code).

To autoformat all files in all projects run npm run format.