ci: sync more workspace changes from other projects

.github/workflows/autofix.yml

@@ -0,0 +1,31 @@
+name: autofix.ci # needed to securely identify the workflow
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  autofix:
+    name: autofix
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5.0.0
+        with:
+          fetch-depth: 0
+      - name: Setup Tools
+        uses: tanstack/config/.github/setup@main
+      - name: Fix formatting
+        run: pnpm run format
+      - name: Apply fixes
+        uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27
+        with:
+          commit-message: 'ci: apply automated fixes'

.github/workflows/pr.yml

@@ -36,4 +36,4 @@ jobs:
         run: |
           pnpm install --no-frozen-lockfile
           pnpm build
-          pnpm test
+          pnpm test:ci

.nvmrc

@@ -1 +1 @@
-v20.19.6
+24.8.0

.prettierignore

@@ -0,0 +1,9 @@
+**/.next
+**/.nx/cache
+**/.svelte-kit
+**/build
+**/coverage
+**/dist
+**/docs/**/reference/**
+**/codemods/**/__testfixtures__
+pnpm-lock.yaml

docs/concepts.md

@@ -22,4 +22,5 @@ At the heart of every Ranger is the `Ranger` class. This class will provide ever
 - Ticks (labels) generation
 
 After reading about Ranger's concepts, you should:
+
 - [Check Out Some Examples](./examples/react/basic)

docs/framework/react/api/basic.md

@@ -5,6 +5,7 @@ menu: API
 ---
 
 ## Examples
+
 Want to skip to the implementation? Check out these examples:
 
 - [basic](../examples/react/basic)
@@ -18,51 +19,67 @@ The API below described how to use the **basic** features.
 ```tsx
 values: ReadonlyArray<number>
 ```
+
 **Required** The current value (or values) for the range.
 
 ### min
 
 ```tsx
 min: number
 ```
+
 **Required** The minimum limit for the range.
 
 ### max
 
 ```tsx
 max: number
 ```
+
 **Required** The maximum limit for the range.
 
 ### stepSize
 
 ```ts
 stepSize: number
 ```
+
 **Required** The distance between selectable steps.
 
 ### onChange
 
 ```ts
 onChange: (instance: Ranger<TTrackElement>) => void
 ```
+
 A function that is called when the handle is released.
 
 ## API
 
 ### handles
+
 ```tsx
-handles: ReadonlyArray<{value: number; isActive: boolean; onKeyDownHandler(event): function; onMouseDownHandler(event): function; onTouchStart(event): function}>
+handles: ReadonlyArray<{
+  value: number
+  isActive: boolean
+  onKeyDownHandler(event): function
+  onMouseDownHandler(event): function
+  onTouchStart(event): function
+}>
 ```
+
 Handles to be rendered. Each `handle` has the following props:
- - `value: number` - The current value for the handle.
- - `isActive: boolean` - Denotes if the handle is currently being dragged.
- - `onKeyDownHandler(event): func`
- - `onMouseDownHandler(event): func`
- - `onTouchStart(event): func`
+
+- `value: number` - The current value for the handle.
+- `isActive: boolean` - Denotes if the handle is currently being dragged.
+- `onKeyDownHandler(event): func`
+- `onMouseDownHandler(event): func`
+- `onTouchStart(event): func`
 
 ### activeHandleIndex
+
 ```tsx
 activeHandleIndex: null | number
 ```
+
 The zero-based index of the handle that is currently being dragged, or `null` if no handle is being dragged.

docs/framework/react/api/custom-steps.md

@@ -5,6 +5,7 @@ menu: API
 ---
 
 ## Examples
+
 Want to skip to the implementation? Check out these examples:
 
 - [custom-steps](../examples/custom-steps)
@@ -18,22 +19,28 @@ The API below described how to use the **custom-steps** features.
 ```ts
 steps: Array<number>
 ```
+
 An array of custom steps to use. This will override `stepSize`
 
 ### ticks
 
 ```ts
 ticks: Array<number>
 ```
+
 An array of custom ticks to use. This will override `tickSize`
 
 ## API
 
 ### getTicks
+
 ```tsx
-getTicks: () => ReadonlyArray<{value: number; key: number; percentage: number}>
+getTicks: () =>
+  ReadonlyArray<{ value: number; key: number; percentage: number }>
 ```
+
 Ticks to be rendered. Each `tick` has the following props:
-  - `value: number` - The tick number to be displayed
-  - `key: number` - The key of a tick
-  - `percentage: number` - Percentage value of where tick should be placed on ranger
+
+- `value: number` - The tick number to be displayed
+- `key: number` - The key of a tick
+- `percentage: number` - Percentage value of where tick should be placed on ranger

docs/framework/react/api/custom-styles.md

@@ -5,6 +5,7 @@ menu: API
 ---
 
 ## Examples
+
 Want to skip to the implementation? Check out these examples:
 
 - [custom-styles](../examples/custom-styles)
@@ -14,9 +15,12 @@ The API below described how to use the **custom-steps** features.
 ## API
 
 ### getSegments
+
 ```tsx
-getSegments: () => ReadonlyArray<{left: number; width: number}>
+getSegments: () => ReadonlyArray<{ left: number; width: number }>
 ```
+
 Segments to be rendered. Each `segment` has the following props:
-  - `left: number` - Percentage value of where segment should start on ranger
-  - `width: number` - Percentage value of segment width 
+
+- `left: number` - Percentage value of where segment should start on ranger
+- `width: number` - Percentage value of segment width

docs/framework/react/api/logarithmic-interpolator.md

@@ -5,6 +5,7 @@ menu: API
 ---
 
 ## Examples
+
 Want to skip to the implementation? Check out these examples:
 
 - [logarithmic-interpolator](../examples/logarithmic-interpolator)
@@ -23,6 +24,8 @@ interpolator: {
     getValueForClientX: (clientX: number, trackDims: object, min: number, max: number): number;
 }
 ```
+
 The Interpolator to use. Defaults to the bundled linear-scale interpolator
- - `getPercentageForValue` - Takes the value & range and returns a percentage [0, 100] where the value sits from left to right.
- - `getValueForClientX`- Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value.
+
+- `getPercentageForValue` - Takes the value & range and returns a percentage [0, 100] where the value sits from left to right.
+- `getValueForClientX`- Takes the clientX (offset from the left edge of the ranger) along with the dimensions and range settings and transforms a pixel coordinate back into a value.

docs/framework/react/api/update-on-drag.md

@@ -5,6 +5,7 @@ menu: API
 ---
 
 ## Examples
+
 Want to skip to the implementation? Check out these examples:
 
 - [update-on-drag](../../examples/update-on-drag)
@@ -18,4 +19,5 @@ The API below described how to use the **update-on-drag** features.
 ```ts
 onDrag: (instance: Ranger<TTrackElement>) => void
 ```
+
 A function that is called when a handled is dragged

docs/quick-start.md

@@ -106,7 +106,6 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root'),
 )
-
 ```
 
 If you skipped this example or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Ranger! Let's move on.

examples/react/basic/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/react/basic/vite.config.js

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })

examples/react/custom-steps/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/react/custom-steps/vite.config.js

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })

examples/react/custom-styles/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/react/custom-styles/src/main.tsx

@@ -53,10 +53,10 @@ export const Segment = styled('div')`
     props.index === 0
       ? '#3e8aff'
       : props.index === 1
-      ? '#00d5c0'
-      : props.index === 2
-      ? '#f5c200'
-      : '#ff6050'};
+        ? '#00d5c0'
+        : props.index === 2
+          ? '#f5c200'
+          : '#ff6050'};
   left: ${(props: { left: number }) => `${props.left}%`};
   height: 100%;
   width: ${(props: { width: number }) => `${props.width}%`};

examples/react/custom-styles/vite.config.js

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })

examples/react/logarithmic-interpolator/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/react/logarithmic-interpolator/vite.config.js

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })

examples/react/update-on-drag/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

examples/react/update-on-drag/vite.config.js

@@ -3,5 +3,5 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })