Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 0 additions & 8 deletions .commitlintrc.js

This file was deleted.

3 changes: 2 additions & 1 deletion .github/ISSUE_TEMPLATE/bug-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ What does `@react-hookz/web` do right now.

### Steps to Reproduce

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://codesandbox.io or similar.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
via https://codesandbox.io or similar.

### What is the expected behavior?

Expand Down
5 changes: 3 additions & 2 deletions .github/PULL_REQUEST_TEMPLATE/new-hook.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
## Checklist

- [ ] Have you read the [contribution guidelines](../../CONTRIBUTING.md)?
- [ ] If you are porting a hook from `react-use`, have you checked #33 and the [migration guide](../../src/__docs__/migrating-from-react-use.story.mdx)
to confirm that the hook has been approved for porting?
- [ ] If you are porting a hook from `react-use`, have you checked #33 and the
[migration guide](../../src/__docs__/migrating-from-react-use.story.mdx) to confirm that the hook has been
approved for porting?
- [ ] Does the code have comments in hard-to-understand areas?
- [ ] Is there an existing issue for this PR?
- _link issue here_
Expand Down
29 changes: 13 additions & 16 deletions .github/workflows/ci-cd.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,35 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: "Checkout"
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
fetch-depth: 0
- name: 'Enable corepack'
run: corepack enable
- uses: actions/setup-node@v4
- uses: actions/setup-node@v5
with:
node-version: 22
node-version: 24
cache: 'yarn'

- name: "Install dependencies"
run: yarn install --immutable

- name: "Lint"
run: yarn lint -f @react-hookz/gha
run: yarn lint -f @ver0/gha

build:
name: "Build"
runs-on: ubuntu-latest
steps:
- name: "Checkout"
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
fetch-depth: 0
- name: 'Enable corepack'
run: corepack enable
- uses: actions/setup-node@v4
- uses: actions/setup-node@v5
with:
node-version: 22
node-version: 24
cache: 'yarn'

- name: "Install dependencies"
Expand All @@ -57,14 +57,14 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: "Checkout"
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
fetch-depth: 0
- name: 'Enable corepack'
run: corepack enable
- uses: actions/setup-node@v4
- uses: actions/setup-node@v5
with:
node-version: 22
node-version: 24
cache: 'yarn'

- name: "Install dependencies"
Expand Down Expand Up @@ -110,22 +110,19 @@ jobs:
new-release-published: ${{ steps.release.outputs.new-release-published }}
steps:
- name: "Checkout"
uses: actions/checkout@v4
uses: actions/checkout@v5
with:
ref: "master"
- name: 'Enable corepack'
run: corepack enable
- uses: actions/setup-node@v4
- uses: actions/setup-node@v5
with:
node-version: 22
node-version: 24
cache: 'yarn'

- name: Install dependencies
run: yarn install --immutable

- name: "disable postinstall"
run: yarn pinst --disable

- name: "Build"
run: yarn build

Expand Down
7 changes: 0 additions & 7 deletions .husky/commit-msg

This file was deleted.

1 change: 0 additions & 1 deletion .husky/pre-commit

This file was deleted.

4 changes: 0 additions & 4 deletions .lintstagedrc.json

This file was deleted.

8 changes: 8 additions & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import ver0Cfg from '@ver0/eslint-config/.prettierrc.js';

/**
* @type {import("prettier").Config}
*/
export default {
...ver0Cfg,
};
8 changes: 3 additions & 5 deletions .releaserc.json
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
{
"branches": [
"master"
],
"plugins": [
"branches": ["master"],
"plugins": [
"@semantic-release/commit-analyzer",
"@semantic-release/release-notes-generator",
"@semantic-release/npm",
"@semantic-release/github"
]
]
}
78 changes: 34 additions & 44 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Contributing

First of all, thanks for contributing to `@react-hookz`! The collective developing and
using this library appreciates your efforts.
First of all, thanks for contributing to `@react-hookz`! The collective developing and using this library appreciates
your efforts.

If you are contributing for the first time, we recommend reading this
[First Contributions guide](https://github.com/firstcontributions/first-contributions) first.
Expand All @@ -18,69 +18,60 @@ If you are contributing for the first time, we recommend reading this
- if your change fixes an issue, name the branch based on the issue number: `pr/fix-12345`
7. Follow the directions below:

> **Tip:** to keep your `master` branch pointing to the original repo's `master` (instead of your
> fork's `master`) do this:
> **Tip:** to keep your `master` branch pointing to the original repo's `master` (instead of your fork's `master`) do
> this:
>
> ```shell
> git remote add upstream https://github.com/react-hookz/web.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> After running these commands you'll be able to easily pull changes from the original repository
> with
> `git pull`.
> After running these commands you'll be able to easily pull changes from the original repository with `git pull`.

## Development

0. Perform self-check on hook usefulness. We're not interested in hooks that has too specific
usecase or hooks that can be easily achieved by composition of existing hooks.
0. Perform self-check on hook usefulness. We're not interested in hooks that has too specific usecase or hooks that can
be easily achieved by composition of existing hooks.
1. Implement the hook in the `src` folder.
- The file with hook implementation should be named `index.ts` and placed in a subdirectory
named after the hook.
- The file with hook implementation should be named `index.ts` and placed in a subdirectory named after the hook.
- The hook should have return types explicitly defined.
- The hook should have a JSDoc comment containing a description of the hook and an overview of
its arguments.
- The hook should have a JSDoc comment containing a description of the hook and an overview of its arguments.
- The hook should be exported by name, not default-exported.
- If the hook has custom types in its parameters or return values, they should be exported as
well.
- If the hook has custom types in its parameters or return values, they should be exported as well.
- Types and interfaces should not have prefixes like `I` or `T`.
- The hook should be developed with SSR in mind, meaning that usage of hook in SSR environment
should not lead to errors.
- If your hook reuses other @react-hookz/web hooks, import them as
`import { useToggle } from '../useToggle';` instead of
`import { useToggle } from '..';`
- The hook should be developed with SSR in mind, meaning that usage of hook in SSR environment should not lead to
errors.
- If your hook reuses other @react-hookz/web hooks, import them as `import { useToggle } from '../useToggle';`
instead of `import { useToggle } from '..';`
2. Re-export the hook implementation and all its custom types in `src/index.ts`.
3. Fully test your hook. The tests should include tests for both DOM and SSR environments.
- Hook's tests should be placed in `__tests__` subdirectory, next to the source file - `dom.ts`
for DOM environment, `ssr.ts` for SSR environment.
For example: `src/useFirstMountState/__tests__/dom.ts`
and `src/useFirstMountState/__tests__/ssr.ts`.
- Ideally, your hook should have 100% test coverage. If that is impossible, you should leave a
comment in the code describing why.
- Each hook should have at least `'should be defined'` and `'should render'` tests in `SSR`
environment.
- Hook's tests should be placed in `__tests__` subdirectory, next to the source file - `dom.ts` for DOM environment,
`ssr.ts` for SSR environment.
For example: `src/useFirstMountState/__tests__/dom.ts` and `src/useFirstMountState/__tests__/ssr.ts`.
- Ideally, your hook should have 100% test coverage. If that is impossible, you should leave a comment in the code
describing why.
- Each hook should have at least `'should be defined'` and `'should render'` tests in `SSR` environment.
- All utility functions should also be tested.
4. Write docs for your hook.
- Docs should be placed in `__docs__` sub-folder, near the source file.
For example: `src/useFirstMountState/__docs__/story.mdx`.
- Docs are built with Storybook. You can run `yarn storybook:watch` to preview your work.
- Write a short example demonstrating your hook in `example.stories.tsx` within the `__docs__`
folder. (If the filename misses the `.stories.tsx` part, Storybook won't find your example.)
- Write a short example demonstrating your hook in `example.stories.tsx` within the `__docs__` folder. (If the
filename misses the `.stories.tsx` part, Storybook won't find your example.)
For example: `src/useFirstMountState/__docs__/example.stories.tsx`.
- Docs are written in MDX format.
[Read more about storybook docs](https://storybook.js.org/docs/react/writing-docs/introduction).
5. Add a summary of the hook and a link to the docs to `README.md`.
6. After all the above steps are done, run `yarn lint:fix` to ensure that everything is styled by
our standards and there are no linting issues.
6. After all the above steps are done, run `yarn lint:fix` to ensure that everything is styled by our standards and
there are no linting issues.
7. `yarn new-hook myAwesomeHook` will help you to create a proper file structure for the new hook.

### Notes on porting a hook from `react-use`

- Check from #33 and the [migration guide](src/__docs__/migrating-from-react-use.story.mdx) that the
hook has been approved for porting. If there is no previous discussion on the hook in #33, leave a
comment there asking if you could port the hook. In your comment, provide a valid use-case for the
hook.
- Check from #33 and the [migration guide](src/__docs__/migrating-from-react-use.story.mdx) that the hook has been
approved for porting. If there is no previous discussion on the hook in #33, leave a comment there asking if you could
port the hook. In your comment, provide a valid use-case for the hook.
- Don't just copy-paste the hook. Think through the code:
- Is there sufficient tests?
- Could the hook be implemented by reusing existing hooks in `@react-hookz/web`?
Expand All @@ -92,9 +83,8 @@ If you are contributing for the first time, we recommend reading this
### Commit message

This repo uses [semantic-release](https://github.com/semantic-release/semantic-release) and
[conventional commit messages](https://conventionalcommits.org) so prefix your commits with `fix:`,
`feat:`, etc., so that your changes appear in the
[release notes](https://github.com/react-hookz/web/blob/master/CHANGELOG.md).
[conventional commit messages](https://conventionalcommits.org) so prefix your commits with `fix:`, `feat:`, etc., so
that your changes appear in the [release notes](https://github.com/react-hookz/web/blob/master/CHANGELOG.md).

Also, there is a script that helps you to properly format commit messages:

Expand All @@ -103,11 +93,11 @@ git add .
yarn commit
```

The script guides you through several prompts that help you with writing a good commit message,
including many non-obvious and easy-to-forget parts.
The script guides you through several prompts that help you with writing a good commit message, including many
non-obvious and easy-to-forget parts.

### Git hooks

This project includes Git hooks that are automatically enabled when you install the dependencies.
These hooks automatically test and validate your code and commit messages before each commit. In
most cases disabling these hooks is not recommended.
This project includes Git hooks that are automatically enabled when you install the dependencies. These hooks
automatically test and validate your code and commit messages before each commit. In most cases disabling these hooks is
not recommended.
Loading