# monkeyspan
> A React component named MonkeySpan!
Latest version **0.6.0** (published 2021-02-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install monkeyspan
pnpm add monkeyspan
yarn add monkeyspan
bun add monkeyspan
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.6.0 |
| Published | 2021-02-07 |
| First published | 2021-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 36.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Anthony Hernandez |
| Maintainers | tonytino |
| Keywords | react, component, npm, package |
## Links
- npm: https://www.npmjs.com/package/monkeyspan
- Repository: https://github.com/tonytino/monkeyspan
- Homepage: https://github.com/tonytino/monkeyspan#readme
- Issues: https://github.com/tonytino/monkeyspan/issues
- npm.io page: https://npm.io/package/monkeyspan
## Dependencies (1)
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.13
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.6.0 (latest) — 2021-02-07
- 0.5.1 — 2021-02-05
- 0.5.0 — 2021-02-03
- 0.4.1 — 2021-02-01
- 0.4.0 — 2021-02-01
- 0.3.2 — 2021-02-01
- 0.3.0 — 2021-02-01
- 0.2.3 — 2021-01-31
- 0.2.2 — 2021-01-31
- 0.2.1 — 2021-01-31
- 0.1.0 — 2021-01-31
- 0.0.1 — 2021-01-26
- 0.0.0 — 2021-01-26
## README
# MonkeySpan
[](https://github.com/prettier/prettier)
[](https://www.npmjs.com/package/monkeyspan)
[](https://monkeyspan.netlify.app/)
## About
An example of how to make a React component package. 🐒
Tinker with this component in [Storybook].
See this package in action in this [CodeSandbox](https://codesandbox.io/s/nervous-frost-r0qcp?file=/src/App.js). 🏜
## Tooling
- [Babel](https://babeljs.io/)
- [ESLint](https://eslint.org/)
- [gh cli]
- [GitHub Actions](https://github.com/features/actions)
- [Husky](https://github.com/typicode/husky)
- [Jest](https://jestjs.io/)
- [lint-staged](https://github.com/okonet/lint-staged)
- [PostCSS](https://postcss.org/)
- [Prettier](https://prettier.io/)
- [Rollup](https://rollupjs.org/guide/en/)
- [Storybook](https://storybook.js.org/)
- [Stylelint](https://stylelint.io/)
- [@testing-library](https://testing-library.com/)
- [TypeScript](https://www.typescriptlang.org/)
## Usage
```jsx
import { MonkeySpan } from "monkeyspan";
function App() {
return (
🐵
);
}
export default App;
```
## Contributing
_Please note that this project follows the practices of [Semantic Versioning] and maintaining a [CHANGELOG]._
### Making Changes
1. Ensure you have the necessary dependencies installed:
```bash
npm install
```
2. Make your changes
3. Test them in Storybook and/or using a separate app (e.g `npx create-react-app demo`):
If you want to test your changes in a separate app, [Yalc](https://github.com/wclr/yalc) is a fantastic tool for linking purposes.
```bash
# in this project's root directory, run
yalc publish
# then in the root directory of the app you're using to demo this package, run:
yalc add monkeyspan && npm run start
```
You should now be able to use the package in that app, e.g.
```jsx
import { MonkeySpan } from "monkeyspan";
```
4. Make sure your changes haven't broken anything:
Run the tests and linting.
```bash
npm run test
```
Ensure the build will generate successfully.
```bash
npm run build
```
5. Commit your changes, open a pull request (`npm run pr:create`), and merge them to the `main` branch.
6. See [Publishing Releases](#publishing-releases).
### Available Scripts
| Command | Params | Example | Purpose
| - | - | - | - |
| build | none | `npm run build` | Runs `npm run build:types && npm run build:rollup` |
| build:link | none | `npm run build:link` | Generates a production build, then publishes it locally via [yalc], and copies to your clipboard the command to run to complete the link within an app directory via `npm run build && npx yalc publish && echo \"yalc add monkeyspan\" | pbcopy`. |
| build:storybook | none | `npm run build:storybook` | Generates a build for storybook using `build-storybook`. |
| build:storybook:docs | none | `npm run build:storybook:docs` | Generates a build for storybook docs using `build-storybook --docs`. |
| build:rollup | none | `npm run build:rollup` | Generates a build and source map (`./dist/bundle.js`, `./dist/bundle.es.js` & `./dist/bundle.js.map`) using Rollup & Babel. |
| build:types | none | `npm run build:types` | Runs `npx tsc --project ./tsconfig.build.json --emitDeclarationOnly`, which runs the typescript compiler to generate types files. |
| clean | none | `npm run clean` | Runs `npm run clean:eslint && npm run clean:css && npm run clean:prettier` |
| clean:artifacts | none | `npm run clean:artifacts` | Runs `rm -rv ./dist ; rm -rv .babel-config-test ; rm -rv storybook-static`, which attempts to delete artifacts created by other scripts. |
| clean:css | none | `npm run clean:css` | Runs `npx stylelint 'src/**/*.css' --fix`, which attempts to resolve all stylelint issues in the project. |
| clean:eslint | none | `npm run clean:eslint` | Runs `npx eslint --fix .`, which attempts to resolve all eslint issues in the project. |
| clean:prettier | none | `npm run clean:prettier` | Runs `npx prettier --write .`, which attempts to resolve all prettier issues in the project. |
| pr:create | none | `gh pr create --web --fill` | Pushes your branch up, opens your browser at the create PR page for your branch, and fills in commit log info automatically. |
| storybook | none | `npm run storybook` | Starts storybook on port 6006 via `start-storybook -p 6006`. |
| storybook:docs | none | `npm run storybook:docs` | Starts storybook on port 6006 in docs mode via `start-storybook -p 6006 --docs`. |
| storybook:nocache | none | `npm run storybook:nocache` | Starts storybook on port 6006 without manager caching via `start-storybook -p 6006 --no-manager-cache`. |
| tag | `--value` | `npm run tag --value=1.2.3` | Runs `npm run tag:create --value=` and `npm run tag:release --value=` |
| tag:create | `--value` | `npm run tag:create --value=1.2.3` | Runs `npx json -I -f ./package.json -e 'this.version=\"$npm_config_value\"' && npm i && git ci -am \"$npm_config_value\" && git tag $npm_config_value`, which updates the `package.json` version to the value provided, updates the `package-lock.json`, generates a commit for the changes, and tags the commit using the value provided. |
| tag:release | `--value` | `npm run tag:release --value=1.2.3` | Runs `git push origin $npm_config_value && gh release create $npm_config_value --title $npm_config_value --notes-file ./CHANGELOG.md`, which pushes the tag value provided to GitHub, then produces a release for it using the `gh` cli. _You will need the [gh cli](https://github.com/cli/cli) for this command to work._ |
| test | none | `npm run test` | Runs `npm run test:eslint && npm run test:css && npm run test:prettier && npm run test:types && npm run test:code` |
| test:babel | none | `npm run test:babel` | Runs `npx babel src/ --out-dir .babel-config-test --extensions ".ts,.tsx,.js,.jsx"`, providing a glimpse at how babel's current config transforms the src code. Find the output in `.babel-config-test/`. |
| test:code | none | `npm run test:code` | Runs the test suite via `npx jest`. |
| test:css | none | `npm run test:css` | Runs stylelint suite via `npx stylelint 'src/**/*.css'`. |
| test:eslint | none | `npm run test:eslint` | Runs `npx eslint .`, providing info about issues. |
| test:prettier | none | `npm run test:prettier` | Runs `npx prettier --check .`, providing info about issues. |
| test:types | none | `npm run test:types` | Runs `npx tsc --project ./tsconfig.eslint.json --noEmit`, which checks for typescript errors without emitting any files. |
### Publishing Releases
_Please note that the following should be done on the `main` branch, except for under certain circumstances, e.g. patching an older version than the last._
In order to generate a release, you need to produce a new package version and a corresponding tag for said version.
For example, let's say you want to add a component or feature to this package.
To do so, you'd simply follow the instructions in [Making Changes](#making-changes), then produce your version via:
1. Determine what type of changes you've made per [Semantic Versioning] to identify what the next version for this package will be. Check the [`package.json`](./package.json#L3)'s current version to begin.
2. Add an entry to the [CHANGELOG].
3. Run the following command with your new version in place of ``:
```bash
npm run tag --value=
```
If it was successful, you'll get a link like `https://github.com/tonytino/monkeyspan/releases/tag/` at the end of output.
4. Go to the URL provided by the script output to see your new release in GitHub.
5. Go to the [Actions tab](https://github.com/tonytino/monkeyspan/actions) for this project and you should see a job running for your release, which, if successful, will upload your new version of this package to [npm].
[CHANGELOG]: ./CHANGELOG.md
[npm]: https://www.npmjs.com/package/monkeyspan
[Semantic Versioning]: https://semver.org
[Storybook]: https://monkeyspan.netlify.app/
[gh cli]: https://github.com/cli/cli
[yalc]: https://github.com/wclr/yalc
---
_Source: https://npm.io/package/monkeyspan · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._