v8 Rewrite

.eslintrc

@@ -4,7 +4,6 @@
     "prettier",
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "plugin:cypress/recommended",
     "plugin:react/recommended"
   ],
   "env": {
@@ -45,6 +44,7 @@
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/no-unused-vars": ["error"],
-    "@typescript-eslint/no-var-requires": 0
+    "@typescript-eslint/no-var-requires": 0,
+    "react/react-in-jsx-scope": "off"
   }
 }

.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:

.gitignore

@@ -42,3 +42,4 @@ cypress/screenshots
 cypress/videos
 /packages/nuka/cypress/screenshots
 /packages/nuka/cypress/videos
+/packages/nuka/storybook-static

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.mdx → docs/api-v7.mdx

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

docs/api/autoplay.mdx

@@ -0,0 +1,34 @@
+---
+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.
+
+### Details
+
+| Prop Name          | Type    | Default Value |
+| :----------------- | :------ | :------------ |
+| `autoplay`         | boolean | `false`       |
+| `autoplayInterval` | number  | `3000`        |
+
+### Example
+
+<Carousel autoplay={true} autoplayInterval={1000}>
+  <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}>
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```

docs/api/buttons.mdx

@@ -0,0 +1,53 @@
+---
+sidebar_position: 2
+---
+
+import { Carousel } from 'nuka-carousel';
+
+# Navigation
+
+The carousel can show buttons to navigate between slides.
+
+### Details
+
+| Prop Name          | Type     | Default Value |
+| :----------------- | :------- | :------------ |
+| `showButtons`          | boolean  | `false`       |
+
+### Example
+
+<Carousel showButtons>
+  <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 showButtons>
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```
+
+### Wraparound
+
+When the `wrapAround` prop is set to `false`, the buttons will be hidden when the first or last slide is active.
+
+<Carousel showButtons wrapAround={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 showButtons wrapAround={false}>
+  <img src="pexels-01.jpg" />
+  <img src="pexels-02.jpg" />
+  <img src="pexels-03.jpg" />
+</Carousel>
+```

docs/api/callbacks.mdx

@@ -0,0 +1,35 @@
+---
+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
+
+This is a code usage example. Docusaurus will not run passed functions because the components are converted to static HTML at build time.
+
+```tsx
+<Carousel beforeSlide={() => myCustomBeforeFunction()}>{/* Cards */}</Carousel>
+```
+
+```tsx
+<Carousel afterSlide={() => myCustomAfterFunction()}>{/* Cards */}</Carousel>
+```