From ce27d2b3c97081c83d467ecfafed6c05e9b97ffb Mon Sep 17 00:00:00 2001 From: Emil Hartz Date: Fri, 5 Mar 2021 11:55:34 -0700 Subject: [PATCH] add contributor doc, update readme, add new pattern example --- CONTRIBUTING.md | 88 ++++++++++++++++++++++++++++++++++++++++++++ README.md | 21 +++-------- examples/app/App.tsx | 18 ++++++--- package.json | 1 + 4 files changed, 107 insertions(+), 21 deletions(-) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..f47e677e --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,88 @@ +# Contributing + +Thanks for contributing! + +## Before you contribute + +This package tries to keep a small footprint/package size by limiting its scope and concerns. It's mainly used as a building block for more complex custom features. + +With this in mind feature requests and PRs that greatly expand its scope will likely not move forward, but we are open to discussing them. + +We encourage pull requests concerning: + +* Bugs in this library +* New tests for React +* Documentation + +## Development + +Initial install & setup, with **node 10+** & **yarn v1**, run `yarn install`. + +Make changes/updates to the `src/index.ts` file. + +**_Please add/update tests if PR adds/changes functionality._** + +### Verify updates with the examples + +Build, run, and test examples locally: +`yarn run start:examples` + +Then open a browser tab to `http://localhost:8080/`. + +You can now make updates/changes to `src/index.ts` and webpack will rebuild, then reload the page so you can test your changes! + +## Testing + +Our builds run unit tests, lint, prettier, compile/build, and watch package size via [size-limit](https://github.com/ai/size-limit/). + +All these steps can be verified via a single command. +```sh +# validate all the things +yarn test +``` + +### Unit Testing + +All unit tests are located in: + +- `__tests__/useSwipeable.spec.tsx` + +These run in node using `jest` and [@testing-library/react](https://github.com/testing-library/react-testing-library). + +```sh +# run all tests +$ yarn run test:unit + +# run all tests and watch for changes +$ yarn run test:unit:watch +``` + +### Lint & Formatting + +We've attempted to standardize our lint and format with `eslint` and `prettier`. The build will fail if these fail. + +```sh +# run lint +$ yarn run lint + +# run prettier +$ yarn run prettier + +# fix prettier errors & reformat code +$ yarn run format +``` + +## Releasing a new version to NPM + +_Only for project administrators_ + +```sh +# (1) Runs tests, lint, build published dir, updates package.json +$ npm version [patch|minor|major|] + +# (2) If all is well, publish the new version to the npm registry +$ npm publish + +# (3) Then, update github and push new associated tag +$ git push --follow-tags +``` diff --git a/README.md b/README.md index 1b6f40e3..38309541 100644 --- a/README.md +++ b/README.md @@ -175,23 +175,14 @@ return
Swipe here
; ``` This explanation and example borrowed from `use-gesture`'s [wonderful docs](https://use-gesture.netlify.app/docs/extras/#touch-action). -## Local Development - -Initial install & setup, with **node 10+** & **yarn v1**, run `yarn`. - -Make changes/updates to the `src/index.ts` file. - -**_Please add/update tests if PR adds/changes functionality._** - -#### Verify updates with the examples +## License -Build, run, and test examples locally: -`yarn run start:examples` +[MIT]((./LICENSE)) -After the server starts you can then view the examples page with your changes at `http://localhost:3000`. +## Contributing -You can now make updates/changes to `src/index.ts` and webpack will rebuild, then reload the page so you can test your changes! +Please see our [contributions guide](./CONTRIBUTING.md). -## License +## Maintenance Status -MIT +**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome. diff --git a/examples/app/App.tsx b/examples/app/App.tsx index 7644f5e8..23c145c2 100644 --- a/examples/app/App.tsx +++ b/examples/app/App.tsx @@ -19,21 +19,27 @@ export default function App({version}: {version: any}) {
Examples:
Feature testing with console log output ⇨
Image Carousel using react-swipeable ⇨
+
Swipe pattern using react-swipeable ⇨
+

Codesandbox Examples:

-

Codesandbox Example:

- - Edit react-swipeable image carousel -