refactor: merge slider to range slider (#927)

Co-authored-by: Segun Adebayo <[email protected]>
chakra-ui · Oct 16, 2023 · 4406e66 · 4406e66 · vercel · Oct 16, 2023
1 parent e9030ba
commit 4406e66
Show file tree

Hide file tree

Showing 65 changed files with 934 additions and 2,917 deletions.
diff --git a/.changeset/slimy-ads-build.md b/.changeset/slimy-ads-build.md
@@ -0,0 +1,10 @@
+---
+"@zag-js/slider": minor
+---
+
+Merge the slider and range slider machines into one to prevent duplication.
+
+Some notable changes:
+
+- `value` and `onValueChange` type has been updated to be `number[]`
+- Update `api.getThumbProps(index)` to `api.getThumbProps({ index })`
diff --git a/.xstate/slider.js b/.xstate/slider.js
@@ -13,24 +13,28 @@ const fetchMachine = createMachine({
   id: "slider",
   initial: "idle",
   context: {
+    "hasIndex": false,
     "isHorizontal": false,
     "isHorizontal": false,
     "isVertical": false,
     "isVertical": false
   },
-  activities: ["trackFormControlState", "trackThumbSize"],
+  entry: ["coarseValue"],
+  activities: ["trackFormControlState", "trackThumbsSize"],
   on: {
-    SET_VALUE: {
+    SET_VALUE: [{
+      cond: "hasIndex",
+      actions: "setValueAtIndex"
+    }, {
       actions: "setValue"
-    },
+    }],
     INCREMENT: {
-      actions: "increment"
+      actions: "incrementAtIndex"
     },
     DECREMENT: {
-      actions: "decrement"
+      actions: "decrementAtIndex"
     }
   },
-  entry: ["checkValue"],
   on: {
     UPDATE_CONTEXT: {
       actions: "updateContext"
@@ -41,59 +45,65 @@ const fetchMachine = createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
+        },
+        FOCUS: {
+          target: "focus",
+          actions: "setFocusedIndex"
         },
-        FOCUS: "focus",
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["invokeOnChangeStart", "focusThumb"]
+          actions: ["setFocusedIndex", "focusActiveThumb"]
         }
       }
     },
     focus: {
-      entry: "focusThumb",
+      entry: "focusActiveThumb",
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+          actions: ["setClosestThumbIndex", "setPointerValue", "focusActiveThumb"]
         },
         THUMB_POINTER_DOWN: {
           target: "dragging",
-          actions: ["invokeOnChangeStart", "focusThumb"]
+          actions: ["setFocusedIndex", "focusActiveThumb"]
         },
         ARROW_LEFT: {
           cond: "isHorizontal",
-          actions: "decrement"
+          actions: "decrementAtIndex"
         },
         ARROW_RIGHT: {
           cond: "isHorizontal",
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         ARROW_UP: {
           cond: "isVertical",
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         ARROW_DOWN: {
           cond: "isVertical",
-          actions: "decrement"
+          actions: "decrementAtIndex"
         },
         PAGE_UP: {
-          actions: "increment"
+          actions: "incrementAtIndex"
         },
         PAGE_DOWN: {
-          actions: "decrement"
+          actions: "decrementAtIndex"
         },
         HOME: {
-          actions: "setToMin"
+          actions: "setActiveThumbToMin"
         },
         END: {
-          actions: "setToMax"
+          actions: "setActiveThumbToMax"
         },
-        BLUR: "idle"
+        BLUR: {
+          target: "idle",
+          actions: "clearFocusedIndex"
+        }
       }
     },
     dragging: {
-      entry: "focusThumb",
+      entry: "focusActiveThumb",
       activities: "trackPointerMove",
       on: {
         POINTER_UP: {
@@ -115,6 +125,7 @@ const fetchMachine = createMachine({
     })
   },
   guards: {
+    "hasIndex": ctx => ctx["hasIndex"],
     "isHorizontal": ctx => ctx["isHorizontal"],
     "isVertical": ctx => ctx["isVertical"]
   }

diff --git a/e2e/slider.e2e.ts b/e2e/slider.e2e.ts
@@ -1,9 +1,9 @@
 import { expect, test } from "@playwright/test"
-import { testid, a11y, rect } from "./__utils"
+import { part, a11y, rect } from "./__utils"
 
-const output = testid("output")
-const thumb = testid("thumb")
-const track = testid("track")
+const output = part("output")
+const thumb = part("thumb")
+const track = part("track")
 
 test.describe("slider", () => {
   test.beforeEach(async ({ page }) => {

diff --git a/examples/next-ts/CHANGELOG.md b/examples/next-ts/CHANGELOG.md
@@ -23,7 +23,7 @@
   - @zag-js/number-input@0.1.13
   - @zag-js/pin-input@0.1.11
   - @zag-js/popover@0.1.11
-  - @zag-js/range-slider@0.1.11
+  - @zag-js/slider@0.1.11
   - @zag-js/rating@0.1.11
   - @zag-js/slider@0.1.11
   - @zag-js/splitter@0.1.11

diff --git a/examples/next-ts/package.json b/examples/next-ts/package.json
@@ -55,14 +55,13 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/react": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -92,4 +91,4 @@
     "typescript": "5.2.2"
   },
   "license": "MIT"
-}
+}
diff --git a/examples/next-ts/pages/range-slider.tsx b/examples/next-ts/pages/range-slider.tsx
@@ -1,14 +1,14 @@
-import * as slider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/react"
-import { rangeSliderControls } from "@zag-js/shared"
+import { sliderControls } from "@zag-js/shared"
 import serialize from "form-serialize"
 import { useId } from "react"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
-  const controls = useControls(rangeSliderControls)
+  const controls = useControls(sliderControls)
 
   const [state, send] = useMachine(
     slider.machine({
@@ -42,8 +42,8 @@ export default function Page() {
                   <div {...api.rangeProps} />
                 </div>
                 {api.value.map((_, index) => (
-                  <div key={index} {...api.getThumbProps(index)}>
-                    <input {...api.getHiddenInputProps(index)} />
+                  <div key={index} {...api.getThumbProps({ index })}>
+                    <input {...api.getHiddenInputProps({ index })} />
                   </div>
                 ))}
               </div>

diff --git a/examples/next-ts/pages/slider.tsx b/examples/next-ts/pages/slider.tsx
@@ -14,6 +14,7 @@ export default function Page() {
     slider.machine({
       id: useId(),
       name: "quantity",
+      value: [0],
     }),
     {
       context: controls.context,
@@ -46,9 +47,11 @@ export default function Page() {
                 <div data-testid="track" {...api.trackProps}>
                   <div {...api.rangeProps} />
                 </div>
-                <div data-testid="thumb" {...api.thumbProps}>
-                  <input {...api.hiddenInputProps} />
-                </div>
+                {api.value.map((_, index) => (
+                  <div key={index} {...api.getThumbProps({ index })}>
+                    <input {...api.getHiddenInputProps({ index })} />
+                  </div>
+                ))}
               </div>
               <div {...api.markerGroupProps}>
                 <span {...api.getMarkerProps({ value: 10 })}>*</span>

diff --git a/examples/nuxt-ts/package.json b/examples/nuxt-ts/package.json
@@ -54,13 +54,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -83,4 +82,4 @@
     "@types/node": "^20.8.4",
     "nuxt": "^3.7.3"
   }
-}
+}
diff --git a/examples/nuxt-ts/pages/range-slider.vue b/examples/nuxt-ts/pages/range-slider.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import * as slider from "@zag-js/range-slider"
-import { rangeSliderControls } from "@zag-js/shared"
+import * as slider from "@zag-js/slider"
+import { sliderControls } from "@zag-js/shared"
 import { normalizeProps, useMachine } from "@zag-js/vue"
 import serialize from "form-serialize"
 
-const controls = useControls(rangeSliderControls)
+const controls = useControls(sliderControls)
 
 const [state, send] = useMachine(
   slider.machine({
@@ -38,8 +38,8 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps))
             <div v-bind="api.trackProps">
               <div v-bind="api.rangeProps" />
             </div>
-            <div v-for="(_, index) in api.value" :key="index" v-bind="api.getThumbProps(index)">
-              <input v-bind="api.getHiddenInputProps(index)" />
+            <div v-for="(_, index) in api.value" :key="index" v-bind="api.getThumbProps({ index })">
+              <input v-bind="api.getHiddenInputProps({ index })" />
             </div>
           </div>
         </div>

diff --git a/examples/nuxt-ts/pages/slider.vue b/examples/nuxt-ts/pages/slider.vue
@@ -10,6 +10,7 @@ const [state, send] = useMachine(
   slider.machine({
     id: "1",
     name: "quantity",
+    value: [0],
   }),
   { context: controls.context },
 )
@@ -31,15 +32,15 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps))
       <div v-bind="api.rootProps">
         <div>
           <label data-testid="label" v-bind="api.labelProps"> Slider Label </label>
-          <output data-testid="output" v-bind="api.outputProps"> {api.value} </output>
+          <output data-testid="output" v-bind="api.outputProps"> {{ api.value.at(0) }} </output>
         </div>
         <div class="control-area">
           <div v-bind="api.controlProps">
             <div data-testid="track" v-bind="api.trackProps">
               <div v-bind="api.rangeProps" />
             </div>
-            <div data-testid="thumb" v-bind="api.thumbProps">
-              <input v-bind="api.hiddenInputProps" />
+            <div v-for="(_, index) in api.value" :key="index" v-bind="api.getThumbProps({ index })">
+              <input v-bind="api.getHiddenInputProps({ index })" />
             </div>
           </div>
           <div v-bind="api.markerGroupProps">

diff --git a/examples/shadow-dom/package.json b/examples/shadow-dom/package.json
@@ -53,13 +53,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/react": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
     "@zag-js/switch": "workspace:*",
@@ -83,4 +82,4 @@
     "typescript": "^5.2.2",
     "vite": "^4.4.9"
   }
-}
+}
diff --git a/examples/solid-ts/CHANGELOG.md b/examples/solid-ts/CHANGELOG.md
@@ -23,7 +23,7 @@
   - @zag-js/number-input@0.1.13
   - @zag-js/pin-input@0.1.11
   - @zag-js/popover@0.1.11
-  - @zag-js/range-slider@0.1.11
+  - @zag-js/slider@0.1.11
   - @zag-js/rating@0.1.11
   - @zag-js/slider@0.1.11
   - @zag-js/splitter@0.1.11

diff --git a/examples/solid-ts/package.json b/examples/solid-ts/package.json
@@ -63,13 +63,12 @@
     "@zag-js/presence": "workspace:*",
     "@zag-js/pressable": "workspace:*",
     "@zag-js/radio-group": "workspace:*",
-    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/slider": "workspace:*",
     "@zag-js/rating-group": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/remove-scroll": "workspace:*",
     "@zag-js/select": "workspace:*",
     "@zag-js/shared": "workspace:*",
-    "@zag-js/slider": "workspace:*",
     "@zag-js/solid": "workspace:*",
     "@zag-js/splitter": "workspace:*",
     "@zag-js/store": "workspace:*",
@@ -87,4 +86,4 @@
     "form-serialize": "0.7.2",
     "solid-js": "1.7.12"
   }
-}
+}
diff --git a/examples/solid-ts/src/pages/range-slider.tsx b/examples/solid-ts/src/pages/range-slider.tsx
@@ -1,14 +1,14 @@
-import * as slider from "@zag-js/range-slider"
+import * as slider from "@zag-js/slider"
 import { normalizeProps, useMachine } from "@zag-js/solid"
 import serialize from "form-serialize"
 import { createMemo, For, createUniqueId } from "solid-js"
-import { rangeSliderControls } from "@zag-js/shared"
+import { sliderControls } from "@zag-js/shared"
 import { StateVisualizer } from "../components/state-visualizer"
 import { Toolbar } from "../components/toolbar"
 import { useControls } from "../hooks/use-controls"
 
 export default function Page() {
-  const controls = useControls(rangeSliderControls)
+  const controls = useControls(sliderControls)
 
   const [state, send] = useMachine(
     slider.machine({
@@ -43,8 +43,8 @@ export default function Page() {
                 </div>
                 <For each={api().value}>
                   {(_, index) => (
-                    <div class="slider__thumb" {...api().getThumbProps(index())}>
-                      <input {...api().getHiddenInputProps(index())} />
+                    <div {...api().getThumbProps({ index: index() })}>
+                      <input {...api().getHiddenInputProps({ index: index() })} />
                     </div>
                   )}
                 </For>