Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/penseapp/toolkit-react
A collection of reusable hooks/components
https://github.com/penseapp/toolkit-react
Last synced: 1 day ago
JSON representation
A collection of reusable hooks/components
- Host: GitHub
- URL: https://github.com/penseapp/toolkit-react
- Owner: penseapp
- License: mit
- Created: 2021-12-30T16:33:28.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T16:03:01.000Z (over 1 year ago)
- Last Synced: 2024-04-23T01:02:19.387Z (7 months ago)
- Language: JavaScript
- Size: 120 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# npm-package-template
[](https://badge.fury.io/js/%40penseapp%2Fnpm-package-template)
[](https://img.shields.io/github/v/tag/penseapp/npm-package-template)
[](https://img.shields.io/github/license/penseapp/npm-package-template)
[](https://img.shields.io/github/issues/penseapp/npm-package-template)
This is a template file that you can extend to create your own NPM package!
## How to use
Clone this repository on any folder
```shell
cd ~/my-folder/some-folder
git clone [email protected]:penseapp/npm-package-template.git
```
Open the `package.json` file and edit these props:
| Prop name | Description | Example |
|---|---|---|
| name | The same package name registered on NPM | @penseapp/my-package-name |
| version | The first version of package (It will increment automatically later | 1.0.0 |
| description | It'll appear on NPM/Github | This package to A,B,C |
Open the `README.MD` and update your package instructions
## NPM
Create an account or login on [NPM](https://www.npmjs.com/login)
Go to the `packages` section. (Here you need to choose to create on a personal account or organization)
For example:
```
https://www.npmjs.com/settings/penseapp/packages
```
Follow the tutorial:
https://jamescalmus.medium.com/how-to-publish-a-scoped-npm-package-for-your-organization-767af1c99b9f
### NPM AUTH TOKEN
The package uses https://github.com/mikeal/merge-release to deploy to NPM
We need to configure the `NPM_AUTH_TOKEN` on github secrets because the `.github/workflows/deploy.yml`
has the call of the token
Generate a new token:
https://docs.npmjs.com/creating-and-viewing-access-tokens
Copy and add to your github secrets with the `NPM_TOKEN` key
## Github
Create a new repository on github
Create a manual tag and release (Only the first time) on the same version of the packge.json and publish the release
> On this example, the version is 1.0.0
Delete this "default GIT" folder
```
rm -rf .git
```
and add the files to your repo
```
git add .
git commit -m 'chore: first version'
git branch -M master
git remote add origin [email protected]:penseapp/npm-package-template.git
git push -u origin master
```
If everything is ok, the github should start the pipeline deploy
## How to install the package
TODO:
-[] Replace the `@penseapp/npm-package-template` to your package name
```
yarn add @penseapp/npm-package-template
```
or
```
npm i @penseapp/npm-package-template
```
## Github actions
This package uses the workflows/pipelines on the `.github` folder to trigger
github actions pipelines to automatize deploy on NPM and chore things.
- Deploy automatically on NPM
- Bump `package.json` version automatically
- Bump `github version` automatically
- Bump `npm version` automatically
- Label the PR's automatically.
## Commitlint
-[] Enforce the commitlint
## Discord integration
This package has a custom integration to Discord server. If you want to receive
notifications on your preferred channel, follow the steps bellow.
If not, delete or comment the `Discord notification` pipelines on `.github/workflows/deploy.yml` github action file.
```
Open Discord -> select the channel -> Click on configuration -> Integrations -> View webhooks -> New webhook
```
Create a new webhook called `Discord notification` and add on Github secrets with a name of `DISCORD_CHANNEL_WEBHOOK`, like the GIF bellow:
Now, you will receive the notifications on the desired discord channel.