Refactor the carousel to use hooks and add new features

.babelrc

@@ -2,7 +2,7 @@
   "presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
   "plugins": [
     "@babel/plugin-transform-object-assign",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-transform-object-rest-spread"
   ],
   "env": {
     "esm": {

.eslintrc

@@ -4,7 +4,6 @@
     "prettier",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "plugin:cypress/recommended",
     "plugin:react/recommended"
   ],
   "env": {

.github/actions/setup/action.yml

@@ -0,0 +1,23 @@
+name: Setup
+description: Setup Build Step
+inputs:
+  node-version:
+    required: true
+    default: '18.x'
+
+runs:
+  using: "composite"
+  steps:
+    - uses: pnpm/action-setup@v3
+      with:
+        version: 7
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/chromatic.yml

@@ -0,0 +1,32 @@
+name: Chromatic
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'packages/**'
+
+jobs:
+  chromatic:
+    name: Storybook Publish
+    runs-on: ubuntu-latest
+    steps:
+      # requires all branches and tags to be fetched for chromatic
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: ./.github/actions/setup
+
+      - name: Build
+        run: pnpm build
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/ci.yml

@@ -12,36 +12,12 @@ jobs:
   build:
     name: Check and build codebase
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [ 16.x, 18.x ]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node-version }}
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
 
-      - uses: pnpm/[email protected]
-        with:
-          version: 7
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Check Code ${{ matrix.node-version }}
+      - name: Check Code
         run: pnpm check:ci
 
-      - name: Build ${{ matrix.node-version }}
+      - name: Build
         run: pnpm build

.github/workflows/release.yml

@@ -18,33 +18,8 @@ jobs:
       pull-requests: write
 
     steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 18.x
-
-      - uses: pnpm/[email protected]
-        with:
-          version: 7
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup
 
       - name: Build packages
         run: pnpm run build
@@ -53,9 +28,6 @@ jobs:
         id: changesets
         uses: changesets/action@v1
         with:
-          # Note: Our `package.json:scripts.version` currently doesn't have `--fix-lockfile` for
-          # `pnpm install` because of a PNPM bug of some kind.
-          # https://github.com/FormidableLabs/spectacle/issues/1156
           version: pnpm run version
           publish: pnpm changeset publish
         env:

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013 - 2018 Formidable Labs, Inc.
+Copyright (c) 2013-2024 Formidable Labs, Inc.
 
 Copyright (c) 2018 Roman Charugin, Alex Smith, Matt Sungwook, and potentially
 other DefinitelyTyped contributors.
@@ -20,4 +20,4 @@ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-[![Nuka Carousel — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/nuka-carousel/main/Nuka-Hero.png)](https://formidable.com/open-source/nuka-carousel)
+[![Nuka Carousel](https://raw.githubusercontent.com/FormidableLabs/nuka-carousel/main/Nuka-Hero.png)](https://commerce.nearform.com/open-source/nuka-carousel)
 
 [![Maintenance Status][maintenance-image]](#maintenance-status)
 
@@ -15,11 +15,11 @@ To add `nuka-carousel` to your project run the following command in your project
 $ yarn add nuka-carousel
 ```
 
-Come learn more and see a live demo at our [docs site](https://formidable.com/open-source/nuka-carousel)!
+Come learn more and see a live demo at our [docs site](https://commerce.nearform.com/open-source/nuka-carousel)!
 
 ## Support
 
-Have a question about react-live? Submit an issue in this repository using the
+Have a question about nuka-carousel? Submit an issue in this repository using the
 ["Question" template](https://github.com/FormidableLabs/nuka-carousel/issues/new?template=question.md).
 
 Notice something inaccurate or confusing? Feel free to [open an issue](https://github.com/FormidableLabs/nuka-carousel/issues/new/choose) or [make a pull request](https://github.com/FormidableLabs/nuka-carousel/pulls) to help improve the documentation for everyone!
@@ -33,6 +33,6 @@ See the [Contribution Docs](CONTRIBUTING.md).
 
 ### Maintenance Status
 
-**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.
+**Active:** Nearform 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.
 
 [maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg?color=brightgreen&style=flat

docs/api-v7.mdx

@@ -1,8 +1,8 @@
 ---
-sidebar_position: 3
+sidebar_position: 5
 ---
 
-# API (v7 and Below)
+# API (v7)
 
 ## Carousel Props
 

docs/api/accessibility.mdx

@@ -0,0 +1,52 @@
+---
+sidebar_position: 6
+---
+
+import { Carousel } from 'nuka-carousel';
+
+# Accessibility
+
+| Prop Name          | Type    | Default Value |
+| :----------------- | :------ | :------------ |
+| `keyboard`         | boolean | `true`       |
+| `title`         | string | `undefined`       |
+
+### Keyboard
+
+By default the carousel can be navigated using the keyboard. The `keyboard` prop can be used to disable the keyboard navigation.
+
+<Carousel showDots showArrows keyboard={false}>
+  <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
+</Carousel>
+
+#### Code
+
+```tsx
+<Carousel showDots showArrows keyboard={false}>
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```
+
+### Title
+
+The carousel has a `title` prop that can be used to provide a title for the carousel. The value of the title will be rendered as a hidden `h3` tag for the carousel targeted with the `aria-labeledby` attribute. This will help screen readers to announce the title of the carousel when it is focused. 
+
+<Carousel showDots showArrows title="Carousel">
+  <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
+</Carousel>
+
+#### Code
+
+```tsx
+<Carousel showDots showArrows title="Carousel">
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```

docs/api/autoplay.mdx

@@ -0,0 +1,33 @@
+---
+sidebar_position: 3
+---
+
+import { Carousel } from 'nuka-carousel';
+
+# Autoplay
+
+The carousel can advance on its own with a specified interval measured in milliseconds. An `autoplayInterval` without the `autoplay` prop being true will not do anything.
+For accessibility, the carousel will pause when the user is interacting with it.
+
+| Prop Name          | Type    | Default Value |
+| :----------------- | :------ | :------------ |
+| `autoplay`         | boolean | `false`       |
+| `autoplayInterval` | number  | `3000`        |
+
+### Example
+
+<Carousel autoplay={true} autoplayInterval={1000} wrapMode="wrap">
+  <img src="/open-source/nuka-carousel/img/pexels-01.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-02.jpg" />
+  <img src="/open-source/nuka-carousel/img/pexels-03.jpg" />
+</Carousel>
+
+#### Code
+
+```tsx
+<Carousel autoplay={true} autoplayInterval={1000}  wrapMode="wrap">
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```

docs/api/callbacks.mdx

@@ -0,0 +1,37 @@
+---
+sidebar_position: 90
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+
+# Callbacks
+
+## Before/After Slide
+
+Functions that are invoked when the progression methods (goBack()/goForward()) are called or when carousel changes its scroll position.
+
+### Details
+
+| Prop Name     | Type       | Default Value |
+| :------------ | :--------- | :------------ |
+| `beforeSlide` | () => void | `undefined`   |
+| `afterSlide`  | () => void | `undefined`   |
+
+- `beforeSlide` - Runs a given function before scrolling when a progression method is called. It will also run right before the carousel registers that it has been scrolled on if manually scrolled.
+- `afterSlide` - Runs a given function after scrolling when a progression method is called or after manually scrolling.
+
+### Example
+
+```tsx
+<Carousel beforeSlide={() => myCustomBeforeFunction()}>
+  {/* Cards */}
+</Carousel>
+```
+
+```tsx
+<Carousel afterSlide={() => myCustomAfterFunction()}>
+  {/* Cards */}
+</Carousel>
+```