Addressing feedback, removing extra copy from Carousel, updating Cont…

…ributing documentation

CONTRIBUTING.md

@@ -48,6 +48,19 @@ All these steps can be verified via a single command.
 yarn test
 ```
 
+## Documentation
+
+Documentation is managed within the `docs` directory. In order to test and preview changes, you'll require Node 18+ to run locally.
+
+```sh
+# navigate to docs directory
+cd docs
+# install modules
+docs$ yarn install
+# start locally and view at http://localhost:3000/
+docs$ yarn start
+```
+
 ### Unit Testing
 
 All unit tests are located in:
@@ -191,4 +204,6 @@ examples$ python -m http.server 8080
 ```sh
 # From root - build and publish the examples app to github pages
 $ yarn examples:build:publish
+
+
 ```

docs/docs/examples/simple-carousel.mdx

@@ -6,7 +6,6 @@ import SimpleCarousel from '@site/src/components/examples/SimpleCarousel'
 
 Below is an example implementation of a simple carousel which utilizes the hooks provided by `react-swipeable` within a TypeScript context.
 
-Note: Swipe must have a duration of `500ms` or lower in order to trigger.
 
 ## Simple Carousel Code Source
 
@@ -16,13 +15,13 @@ You can see this full example as pure code within the [Carousel.tsx](https://git
 
 <SimpleCarousel />
 
-Note: Swipe must have a duration of `500ms` or lower in order to trigger the swipe action.
+Note: The action of swiping must have a duration of `500ms` or lower in order to trigger the swipe action.
 
 ## Simple Carousel Code Explained
 
 Import the hook directly from the `react-swipeable` library. In our example, we built and imported a local set of UI components: you can utilize your own UI and styling, or use your favorite UI component library of choice.
 
-```
+```typescript
 import { useSwipeable } from 'react-swipeable';
 import {
   Wrapper,
@@ -37,7 +36,7 @@ import {
 
 Below, we set up types and an interface for some of the work we'll be building. Next, we write a function called `getOrder`, which will drive the position of each item in the carousel, and what order of position each will be displayed in context of the carousel. Finally, we have a simple `getInitialState` position that sets the `CarouselState` of the carousel we'll be building.
 
-```
+```typescript
 type Direction = typeof PREV | typeof NEXT;
 
 interface CarouselState {
@@ -60,7 +59,7 @@ const getInitialState = (numItems: number): CarouselState => ({ pos: numItems -
 
 Next, we build a reducer for controlling the action of the Carousel, using a switch to set `CarouselState` logic.
 
-```
+```typescript
 function reducer(state: CarouselState, action: CarouselAction): CarouselState {
   switch (action.type) {
     case PREV:
@@ -93,7 +92,7 @@ At the end, we return the component itself, built with the components we've crea
 
 When we put it all together, our `<Carousel>` is complete!
 
-```
+```typescript
 const Carousel: FunctionComponent<{children: ReactNode}> = (props) => {
   const numItems = React.Children.count(props.children);
   const [state, dispatch] = React.useReducer(reducer, getInitialState(numItems));

docs/src/components/examples/SimpleCarousel/index.tsx

@@ -16,15 +16,6 @@ function SimpleCarousel() {
         <Item src={Product4} />
         <Item src={Product5} />
       </Carousel>
-      <b>Note: swipe must be "faster" than 500ms to trigger.</b>
-      <h6>
-        <a href="https://github.com/FormidableLabs/react-swipeable/blob/main/examples/app/SimpleCarousel/Carousel.tsx">
-          See code
-        </a>{" "}
-        for example usage of{" "}
-        <code style={{ whiteSpace: "nowrap" }}>swipeDuration</code> and{" "}
-        <code>preventScrollOnSwipe</code>.
-      </h6>
     </div>
   );
 }