docs/add contributing doc (#328)

README.md

@@ -4,7 +4,6 @@
 
 - [React Currency Input Field Component](#react-currency-input-field-component)
   - [Features](#features)
-  - [Migrating to v3.0.0](#migrating-to-v300)
   - [Examples](#examples)
   - [Install](#install)
   - [Usage](#usage)
@@ -21,6 +20,7 @@
     - [Improvements in v3](#improvements-in-v3)
     - [Reasoning](#reasoning)
   - [Issues](#issues)
+  - [Contributing](#contributing)
 
 ## Features
 
@@ -33,12 +33,6 @@
 - Written in TypeScript and has type support
 - Does not use any third party packages
 
-## Migrating to v3.0.0
-
-There are a number of breaking changes in v3.0.0, please read the [release notes](#v300-release-notes) if migrating from v2 to v3.
-
-:warning: Most important change is: `onChange` has been renamed to `onValueChange`
-
 ## Examples
 
 [Play with demo](https://cchanxzy.github.io/react-currency-input-field) or view [examples code](https://github.com/cchanxzy/react-currency-input-field/blob/main/src/examples)
@@ -255,4 +249,8 @@ I apologize if any of the changes cause new bugs or issues. Please let me know a
 
 ## Issues
 
-Feel free to raise an issue on Github if you find a bug or have a feature request
+Feel free to raise an issue on Github if you find a bug or have a feature request.
+
+## Contributing
+
+If you want to contribute to this repository, please refer to the [contributing doc](https://github.com/cchanxzy/react-currency-input-field/blob/main/docs/CONTRIBUTING.md)

docs/CONTRIBUTING.md

@@ -0,0 +1,42 @@
+# Contributing
+
+Thanks for being willing to contribute!
+
+## Project setup
+
+1. Fork and clone the repo
+2. Run `yarn` to install dependencies
+3. Create a branch for your PR with `git checkout -b pr/your-branch-name`
+
+> Tip: Keep your `main` branch pointing at the original repository and make pull
+> requests from branches on your fork. To do this, run:
+>
+> ```bash
+> git remote add upstream https://github.com/cchanxzy/react-currency-input-field.git
+> git fetch upstream
+> git branch --set-upstream-to=upstream/main main
+> ```
+>
+> This will add the original repository as a "remote" called "upstream," Then
+> fetch the git information from that remote, then set your local `main` branch
+> to use the upstream main branch whenever you run `git pull`. Then you can make
+> all of your pull request branches based on this `main` branch. Whenever you
+> want to update your version of `main`, do a regular `git pull`.
+
+## Start
+
+To start the examples page locally, run `yarn start`.
+
+This will open the page in `http://localhost:1234/`.
+
+## Committing and Pushing changes
+
+Please make sure to run the tests before you commit your changes.
+
+## Pull request
+
+If you are a first time contributor for this project, your PR will not run the checks required in CI. Please mention @cchanxzy in a comment on the pull request, and I will enable the checks to run for the PR.
+
+## Help needed
+
+Please checkout the [the open issues](https://github.com/cchanxzy/react-currency-input-field/issues)

package.json

@@ -12,7 +12,7 @@
   "homepage": "https://github.com/cchanxzy/react-currency-input-field",
   "scripts": {
     "build": "rm -rf dist && tsc && rollup -c",
-    "start": "parcel src/examples/index.html",
+    "start": "parcel src/examples/index.html --open",
     "test": "LANG=en_GB jest",
     "test-ci": "LANG=en_GB.UTF-8 cross-env NODE_ICU_DATA=node_modules/full-icu jest",
     "typecheck": "tsc && tsc --project tsconfig.test.json",

src/components/__tests__/CurrencyInput-negative.spec.tsx

@@ -79,7 +79,7 @@ describe('<CurrencyInput/> negative value', () => {
       '{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}-'
     );
     expect(screen.getByRole('textbox')).toHaveValue('-');
-    expect(onValueChangeSpy).toBeCalledTimes(7);
+    expect(onValueChangeSpy).toHaveBeenCalledTimes(7);
     expect(onValueChangeSpy).toHaveBeenLastCalledWith(undefined, undefined, {
       float: null,
       formatted: '',

src/components/__tests__/CurrencyInput.spec.tsx

@@ -224,7 +224,7 @@ describe('<CurrencyInput/>', () => {
     render(<CurrencyInput prefix="£" onChange={onChangeSpy} />);
     userEvent.type(screen.getByRole('textbox'), '123');
 
-    expect(onChangeSpy).toBeCalledTimes(3);
+    expect(onChangeSpy).toHaveBeenCalledTimes(3);
 
     expect(screen.getByRole('textbox')).toHaveValue('£123');
   });
@@ -235,31 +235,31 @@ describe('<CurrencyInput/>', () => {
     userEvent.click(screen.getByRole('textbox'));
     fireEvent.focusOut(screen.getByRole('textbox'));
 
-    expect(onBlurSpy).toBeCalledTimes(1);
+    expect(onBlurSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should call onFocus', () => {
     const onFocusSpy = jest.fn();
     render(<CurrencyInput onFocus={onFocusSpy} />);
     fireEvent.focusIn(screen.getByRole('textbox'));
 
-    expect(onFocusSpy).toBeCalledTimes(1);
+    expect(onFocusSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should call onKeyDown', () => {
     const onKeyDownSpy = jest.fn();
     render(<CurrencyInput onKeyDown={onKeyDownSpy} />);
     userEvent.type(screen.getByRole('textbox'), '1');
 
-    expect(onKeyDownSpy).toBeCalledTimes(1);
+    expect(onKeyDownSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should call onKeyUp', () => {
     const onKeyUpSpy = jest.fn();
     render(<CurrencyInput onKeyUp={onKeyUpSpy} />);
     userEvent.type(screen.getByRole('textbox'), '1');
 
-    expect(onKeyUpSpy).toBeCalledTimes(1);
+    expect(onKeyUpSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should update the input when prop value changes to another number', () => {