Merge pull request #404 from antonioru/feat/remove_index

Version 4.0.0

BREAKING CHANGE: removes index.ts file from src directory

.eslintrc.js

@@ -0,0 +1,57 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard-with-typescript'
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    'react'
+  ],
+  rules: {
+    'max-len': [
+      'error',
+      {
+        code: 140
+      }
+    ],
+    semi: [
+      2,
+      'never'
+    ],
+    '@typescript-eslint/semi': 'off',
+    'linebreak-style': 'off',
+    'object-curly-newline': 'off',
+    'react/jsx-filename-extension': 'off',
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off'
+  },
+  overrides: [
+    {
+      files: [
+        '*.test.js',
+        '*.spec.js',
+        '*.test.jsx',
+        '*.spec.jsx'
+      ],
+      globals: {
+        expect: 'readonly',
+        should: 'readonly',
+        sinon: 'readonly'
+      },
+      rules: {
+        'no-unused-expressions': 'off'
+      }
+    }
+  ]
+}

.github/workflows/branch-tests.yml

@@ -11,11 +11,11 @@ on:
 jobs:
   test:
     if: "!contains(github.event.head_commit.message, 'skip ci')"
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: 18
+        node-version: [ 18.14 ]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/ci.yml

@@ -17,11 +17,11 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 18
+          node-version: 18.14
           registry-url: https://registry.npmjs.org/
 
       - name: NPM CI
-        run: npm install --force
+        run: npm install
 
       - name: Repository build
         run: npm run build
@@ -45,7 +45,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Prepare distribution
-        run: cp package.json README.md LICENSE CHANGELOG.md CONTRIBUTING.md CODE_OF_CONDUCT.md ./dist
+        run: cp package.json README.md LICENSE.txt CHANGELOG.md CONTRIBUTING.md CODE_OF_CONDUCT.md ./dist
 
       - name: Publish
         run: |

.nycrc

@@ -5,8 +5,8 @@
   "extension": [ ".js" ],
   "include": [ "dist/*.js" ],
   "exclude": [ "dist/index.js", "dist/_virtual/**/*.js" ],
-  "branches": 60,
-  "lines": 70,
+  "branches": 50,
+  "lines": 80,
   "functions": 70,
   "statements": 70
 }

CHANGELOG.md

@@ -999,3 +999,12 @@ Errored release
 ### Fixes
 
 - `useLocalStorage` and `useSessionStorage` no longer return a new `setValue` function everytime `setValue` is called
+
+## [4.0.0] - 2023-03-13
+
+### Breaking Changes
+
+- Removes `index.ts` file from `src` folder
+- Updates dependencies
+- Improves documentation
+- Improves types

HOOK_DOCUMENTATION_TEMPLATE.md

@@ -1,6 +1,6 @@
 # useYourHookName
 
--- A short description of your hook --
+A hook that [...]
 
 ### 💡 Why?
 
@@ -9,12 +9,11 @@
 ### Basic Usage:
 
 ```jsx harmony
-import { yourHook } from 'beautiful-react-hooks'; 
-
+import { yourHook } from 'beautiful-react-hooks';
 
 const YourExample = () => {
   /* Your code goes here */
-  
+
   return null;
 };
 
@@ -26,12 +25,11 @@ const YourExample = () => {
 description of the use case
 
 ```jsx harmony
-import { yourHook } from 'beautiful-react-hooks'; 
-
+import { yourHook } from 'beautiful-react-hooks';
 
 const YourUseCase = () => {
   /* Your code goes here */
-  
+
   return null;
 };
 
@@ -41,9 +39,11 @@ const YourUseCase = () => {
 ### Mastering the hooks
 
 #### ✅ When to use
- 
+
 - When it's good to use
 
 #### 🛑 When not to use
 
 - When it's not good to use
+
+<!-- Types -->

README.md

@@ -13,15 +13,14 @@ MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.or
 <br />
 <div>
   <p align="center">
-    A collection of beautiful (and hopefully useful) React hooks to speed-up your
-    components and hooks development
+    A collection of tailor-made React hooks to enhance your development process and make it faster.
   </p>
 </div>
 
 <div>
   <p align="center">
     <a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
-    🌟 Live playground here 🌟
+    🌟 Hooks Playground 🌟
     </a>
   </p>
 </div>
@@ -38,13 +37,13 @@ MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.or
 
 ## 💡 Why?
 
-React custom hooks allow to abstract components' business logic into single reusable functions.<br />
-So far, we've found that most of the hooks we've created and therefore shared between our internal projects have quite often a similar gist
-that involves callback references, events and components' lifecycle. <br />
-For this reason we've tried to sum up that gist into `beautiful-react-hooks`: a collection of (*hopefully*) useful React hooks to possibly
-help other companies and professionals to speed up their development process.<br /><br />
-Furthermore, we created a concise yet concrete API having in mind the code readability, focusing to keep the learning curve as lower as
-possible so that the it can be used and shared in bigger teams.
+Custom React hooks allow developers to abstract the business logic of components into single, reusable functions.\
+I have noticed that many of the hooks I have created and shared across projects involve callbacks, references, events, and dealing with the
+component lifecycle.\
+Therefore, I have created `beautiful-react-hooks`, a collection of useful [React hooks](https://beta.reactjs.org/reference/react) that may
+help other developers speed up their development process.\
+Moreover, I have strived to create a concise and practical API that emphasizes code readability, while keeping the learning curve as low as
+possible, making it suitable for larger teams to use and share
 
 **-- Please before using any hook, read its documentation! --**
 
@@ -57,7 +56,7 @@ possible so that the it can be used and shared in bigger teams.
 <div>
   <p align="center">
     <a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
-    🌟 Live playground here 🌟
+    🌟 Hooks Playground 🌟
     </a>
   </p>
 </div>
@@ -76,6 +75,14 @@ by using `yarn`:
 $ yarn add beautiful-react-hooks
 ```
 
+## Basic usage
+
+importing a hooks is as easy as the following straightforward line:
+
+```ts static
+import useSomeHook from 'beautiful-react-hooks/useSomeHook'
+```
+
 ## 🎨 Hooks
 
 * [useQueryParam](docs/useQueryParam.md)
@@ -127,36 +134,29 @@ $ yarn add beautiful-react-hooks
 <div>
   <p align="center">
     <a href="https://antonioru.github.io/beautiful-react-hooks/" target="_blank">
-    🌟 Live playground here 🌟
+    🌟 Hooks Playground 🌟
     </a>
   </p>
 </div>
 
 ## Peer dependencies
 
-Some hooks are built on top of third-party libraries (rxjs, react-router-dom, redux), therefore you will notice those libraries listed as
-peer dependencies. You don't have to install these dependencies unless you directly use those hooks.
+Some hooks are built using third-party libraries (such as rxjs, react-router-dom, redux). As a result, you will see these libraries listed
+as peer dependencies.\
+Unless you are using these hooks directly, you need not install these dependencies.
 
 ## Contributing
 
 Contributions are very welcome and wanted.
 
-To submit your custom hook, please make sure your read our [CONTRIBUTING](./CONTRIBUTING.md) guidelines.
+To submit your custom hook, make sure you have thoroughly read and understood the [CONTRIBUTING](./CONTRIBUTING.md) guidelines.
 
-**Before submitting** a new merge request, please make sure:
+**Prior to submitting your pull request**: please take note of the following
 
 1. make sure to write tests for your code, run `npm test` and `npm build` before submitting your merge request.
-2. in case you're creating a custom hook, make sure you've added the documentation (*you can possibly use
+2. in case you're creating a custom hook, make sure you've added the documentation (*you may use
    the [HOOK_DOCUMENTATION_TEMPLATE](./HOOK_DOCUMENTATION_TEMPLATE.md) to document your custom hook*).
 
-### Made with
-
-* [React](https://reactjs.org/)
-* [Mocha](https://mochajs.org/)
-* [Chai](https://www.chaijs.com/)
-* [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro)
-* [@testing-library/react-hooks](https://react-hooks-testing-library.com/)
-
----
+## Credits
 
 Icon made by [Freepik](https://www.flaticon.com/authors/freepik) from [www.flaticon.com](https://www.flaticon.com/free-icon/hook_1081812)

docs/Installation.md

@@ -21,28 +21,40 @@ import useSomeHook from 'beautiful-react-hoks/useSomeHook'
 **Please note**: always import your hook from the library as a single module to avoid importing unnecessary hooks and therefore unnecessary
 dependencies
 
+## Peer dependencies
+
+Some hooks are built on top of third-party libraries (rxjs, react-router-dom, redux), therefore you will notice those libraries listed as
+peer dependencies. You don't have to install these dependencies unless you directly use those hooks.
+
 ## Working with Refs in TypeScript
 
 The documentation of this module is written in JavaScript, so you will see a lot of this:
 
-```javascript
+```jsx static
 import { ref } from 'react';
 
-const ref = useRef()
+const myCustomHook = () => {
+  const ref = useRef()
+
+  /* your code */
+
+  return ref;
+}
 ```
 
 If you are in a TypeScript project, you should declare your ref as a `RefObject<T extends HTMLElement>`. For example:
 
-```ts
+```ts static
 import { ref } from 'react';
 
-const ref = useRef<HTMLDivElement>(null);
+const myCustomHook = () => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  /* your code */
+
+  return ref;
+}
 ```
 
 See [here](https://dev.to/wojciechmatuszewski/mutable-and-immutable-useref-semantics-with-react-typescript-30c9) for information on the
 difference between a `MutableRefObject` and a `RefObject`.
-
-## Peer dependencies
-
-Some hooks are built on top of third-party libraries (rxjs, react-router-dom, redux), therefore you will notice those libraries listed as
-peer dependencies. You don't have to install these dependencies unless you directly use those hooks.