v8 Rewrite

.eslintrc

@@ -45,6 +45,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/workflows/storybook-tests.yml

@@ -0,0 +1,25 @@
+name: 'Storybook Tests'
+on: push
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+      - name: Build Storybook
+        run: pnpm build:storybook --quiet
+      - name: Serve Storybook and run tests
+        run: |
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server packages/nuka/storybook-static --port 6006" \
+            "npx wait-on tcp:127.0.0.1:6006 && pnpm test:storybook"

.gitignore

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

docs/api.mdx → docs/api-v7.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 3
 ---
 
-# API
+# API (v7 and Below)
 
 ## Carousel Props
 

docs/api/index.mdx

@@ -0,0 +1,7 @@
+---
+sidebar_position: 3
+---
+
+# API (v8+)
+
+Nuka v8 and above are completely rewritten with new props and might not be completely backwards compatable with v7.

docs/api/methods.mdx

@@ -0,0 +1,47 @@
+---
+sidebar_position: 2
+---
+
+import { MethodsDemo } from '../../website/src/components/demos';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Methods
+
+Nuka Carousel has a few exposed methods that allow the user to control certain parts of the carousel manually. These methods are accessed via a ref attached to the carousel.
+
+```tsx title="MyComponent.tsx"
+import { useRef } from 'react';
+import Carousel, { SlideHandle } from 'nuka-carousel';
+
+const MyComponent = () => {
+  const ref = useRef<SlideHandle>(null);
+
+  return (
+    <div>
+      <Carousel ref={ref}>...</Carousel>
+
+      <button onClick={() => ref.current.goBack()}>Back</button>
+      <button onClick={() => ref.current.goForward()}>Forward</button>
+    </div>
+  );
+};
+```
+
+---
+
+## Progression
+
+The carousel can be advanced forward and backwards based on the `scrollDistance` defined from the props.
+
+### `goForward()`
+
+Advances the carousel forward by the given `scrollDistance`.
+
+### `goBack()`
+
+Advances the carousel backward by the given `scrollDistance`.
+
+### Usage/Examples
+
+<MethodsDemo />

docs/api/options.mdx

@@ -0,0 +1,155 @@
+---
+sidebar_position: 1
+---
+
+import { BasicDemo } from '../../website/src/components/demos';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Options
+
+## 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
+
+<BasicDemo className="standard-demo" autoplay={true} />
+
+---
+
+## Scroll
+
+How far the carousel should move when its goForward() and goBack() methods are called.
+
+### Details
+
+| Prop Name        | Type                          | Default Value |
+| :--------------- | :---------------------------- | :------------ |
+| `scrollDistance` | "slide" \| number \| "screen" | `slide`       |
+
+Using a number will cause the carousel to scroll that many pixels each time.
+Using "slide" will advance the carousel one slide each time.
+Using "screen" will advance the carousel by the width of the visible carousel.
+
+### Examples
+
+<Tabs lazy>
+  <TabItem value="slide" label="Slide" default>
+    <p>
+      Default scroll by slide width. The scroll distance will automatically
+      update on the widths of the slides so you can have multiple widths for
+      each slide.
+    </p>
+    <BasicDemo className="slide-distance-demo" scrollDistance="slide" />
+  </TabItem>
+  <TabItem value="fixed" label="Fixed Distance (number)">
+    <p>
+      Scroll by a fixed distance measured in px. This example scrolls by 100px.
+    </p>
+    <BasicDemo className="fixed-distance-demo" scrollDistance={100} />
+  </TabItem>
+  <TabItem value="screen" label="Screen">
+    <p>
+      Scroll by the width of the "screen" or the container the carousel is in.
+    </p>
+    <BasicDemo className="screen=distance-demo" scrollDistance="screen" />
+  </TabItem>
+</Tabs>
+
+---
+
+## Page Indicators
+
+Indicators that show what page the carousel is on. These pages are calculated from the `scrollDistance` and have to be styled in addition to setting the `showPageIndicators` boolean to true.
+
+### Details
+
+| Prop Name            | Type               | Default Value |
+| :------------------- | :----------------- | :------------ |
+| `showPageIndicators` | boolean            | `false`       |
+| `pageIndicatorProps` | object (see below) | see below     |
+
+#### `pageIndicatorProps` Details
+
+| Prop Name                       | Type   | Default Value |
+| :------------------------------ | :----- | :------------ |
+| `containerClassName`            | string | `undefined`   |
+| `currentPageIndicatorClassName` | string | `undefined`   |
+| `pageIndicatorClassName`        | string | `undefined`   |
+
+### Example
+
+<BasicDemo
+  className="standard-demo"
+  showPageIndicators={true}
+  pageIndicatorProps={{
+    containerClassName: 'flex items-center justify-center py-4 gap-2',
+    pageIndicatorClassName:
+      'w-3 h-3 p-0 rounded-full bg-gray-200 border-none cursor-pointer hover:bg-pink-200',
+    currentPageIndicatorClassName: 'bg-pink-500 hover:bg-pink-500',
+  }}
+  scrollDistance="screen"
+/>
+
+---
+
+## Wrapper Styling
+
+Apply classNames to the `<div>` that contains the `children`. This is likely how you will determine the spacing between items in the carousel.
+
+By default, this wrapper has `display: flex` applied.
+
+### Details
+
+| Prop Name          | Type   | Default Value |
+| :----------------- | :----- | :------------ |
+| `wrapperClassName` | string | `undefined`   |
+
+### Example
+
+<BasicDemo className="standard-demo" wrapperClassName="gap-4" />
+
+---
+
+## 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
+<BasicDemo
+  beforeSlide={() => {
+    myCustomBeforeFunction();
+  }}
+/>
+```
+
+```tsx
+<BasicDemo
+  afterSlide={() => {
+    myCustomAfterFunction();
+  }}
+/>
+```