add contributor doc, update readme, add new pattern example (#236)

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|<version>]
+
+# (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
+```

README.md

@@ -175,23 +175,14 @@ return <div {...handlers} style={{ touchAction: 'pan-y' }}> Swipe here </div>;
 ```
 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.

examples/app/App.tsx

@@ -19,21 +19,27 @@ export default function App({version}: {version: any}) {
           <dt>Examples:</dt>
           <dd><a href="#FeatureTestConsole">Feature testing with console log output ⇨</a></dd>
           <dd><a href="#SimpleCarousel">Image Carousel using react-swipeable ⇨</a></dd>
+          <dd><a href="#SimplePattern">Swipe pattern using react-swipeable ⇨</a></dd>
         </dl>
         <hr />
         <FeatureTestConsole />
         <hr />
+        <h2>Codesandbox Examples:</h2>
         <div className="row" id="SimpleCarousel">
-          <h2>Codesandbox Example:</h2>
-          <a href="https://codesandbox.io/s/react-swipeable-image-carousel-hben8?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FCarousel.js&theme=light&view=preview" style={{ margin: 'auto', paddingBottom: '1rem' }}>
-            <img alt="Edit react-swipeable image carousel" src="https://codesandbox.io/static/img/play-codesandbox.svg" />
-          </a>
           <iframe src="https://codesandbox.io/embed/react-swipeable-image-carousel-hben8?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FCarousel.js&theme=light&view=preview" style={{width: '100%', height: '500px', border: '0', borderRadius: '4px', overflow: 'hidden'}} title="react-swipeable image carousel" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
         </div>
         <hr />
+        <div className="row" id="SimplePattern">
+          <iframe src="https://codesandbox.io/embed/react-swipeable-direction-pattern-example-jkt4z?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fpattern.js&theme=light&view=preview"
+          style={{width: '100%', height: '500px', border: '0', borderRadius: '4px', overflow: 'hidden'}}
+          title="react-swipeable direction pattern example"
+          allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+          sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" />
+        </div>
+        <hr />
         <p style={{"marginBottom": "2rem"}}>
-          Thanks for checking out the example app! Let us know if you find any bugs, and&nbsp;
-          <a href="https://github.com/FormidableLabs/react-swipeable/pulls">submit a PR!</a>
+          Thanks for checking out the examples! Let us know if you discover anything or have thoughts on improvements, and&nbsp;
+          <a href="https://github.com/FormidableLabs/react-swipeable/issues">submit an issue or PR!</a>
         </p>
       </div>
     </div>

package.json

@@ -23,6 +23,7 @@
     "prebuild": "yarn run clean",
     "prepare": "yarn run build",
     "pretest": "yarn run prettier && yarn run lint",
+    "preversion": "yarn test",
     "size": "size-limit",
     "start:examples": "cd ./examples && webpack-dev-server",
     "test": "yarn run test:unit && yarn run build && yarn run size",