FormidableLabs · carbonrobot · Apr 5, 2024 · Feb 1, 2024 · Mar 13, 2024 · Apr 2, 2024
diff --git a/.babelrc b/.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": {

diff --git a/.changeset/config.json b/.changeset/config.json
@@ -7,5 +7,6 @@
     }
   ],
   "access": "public",
-  "baseBranch": "main"
+  "baseBranch": "main",
+  "ignore": ["website"]
 }
diff --git a/.changeset/empty-cows-accept.md b/.changeset/empty-cows-accept.md
@@ -0,0 +1,5 @@
+---
+'nuka-carousel': major
+---
+
+Nuka v8 Release
diff --git a/.eslintrc b/.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"
   }
 }
diff --git a/.github/actions/setup/action.yml b/.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
diff --git a/.github/workflows/chromatic.yml b/.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 }}
diff --git a/.github/workflows/ci.yml b/.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/action-setup@v2.2.2
-        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
diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
diff --git a/.github/workflows/release.yml b/.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/action-setup@v2.2.2
-        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:

diff --git a/.gitignore b/.gitignore
@@ -42,3 +42,4 @@ cypress/screenshots
 cypress/videos
 /packages/nuka/cypress/screenshots
 /packages/nuka/cypress/videos
+/packages/nuka/storybook-static
diff --git a/LICENSE b/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.
diff --git a/README.md b/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
diff --git a/docs/api.mdx → docs/api-v7.mdx b/docs/api.mdx → docs/api-v7.mdx
@@ -1,8 +1,8 @@
 ---
-sidebar_position: 3
+sidebar_position: 5
 ---
 
-# API
+# API (v7)
 
 ## Carousel Props
 

diff --git a/docs/api/accessibility.mdx b/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>
+```
diff --git a/docs/api/autoplay.mdx b/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>
+```