chore: add eslint

Author: joshuaellis

.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["react-spring"]
+}

.github/workflows/main.yml

@@ -40,6 +40,9 @@ jobs:
       - name: Build
         run: yarn build
 
+      - name: Lint
+        run: yarn lint
+
       - name: Typecheck
         run: yarn test:ts
 

demo/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["react-spring"]
+}

demo/custom.d.ts

@@ -1,2 +1,3 @@
 declare module 'vec-la'
 declare module '*.scss'
+declare module '*.module.css'

demo/package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "dev": "vite",
     "clean": "rm -rf .turbo && rm -rf node_modules",
+    "lint": "TIMING=1 eslint \"src/**/*.ts*\"",
     "serve": "vite preview"
   },
   "dependencies": {

demo/src/sandboxes/draggable-list/custom.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css'

demo/src/sandboxes/draggable-list/src/App.tsx

@@ -1,30 +1,32 @@
-import React, { useRef } from 'react'
+import * as React from 'react'
 import { useSprings, animated } from '@react-spring/web'
 import { useDrag } from 'react-use-gesture'
 import clamp from 'lodash.clamp'
 import swap from 'lodash-move'
 
 import styles from './styles.module.css'
 
-const fn = (order: number[], active = false, originalIndex = 0, curIndex = 0, y = 0) => (index: number) =>
-  active && index === originalIndex
-    ? {
-        y: curIndex * 50 + y,
-        scale: 1.1,
-        zIndex: 1,
-        shadow: 15,
-        immediate: (key: string) => key === 'y' || key === 'zIndex',
-      }
-    : {
-        y: order.indexOf(index) * 50,
-        scale: 1,
-        zIndex: 0,
-        shadow: 1,
-        immediate: false,
-      }
+const fn =
+  (order: number[], active = false, originalIndex = 0, curIndex = 0, y = 0) =>
+  (index: number) =>
+    active && index === originalIndex
+      ? {
+          y: curIndex * 50 + y,
+          scale: 1.1,
+          zIndex: 1,
+          shadow: 15,
+          immediate: (key: string) => key === 'y' || key === 'zIndex',
+        }
+      : {
+          y: order.indexOf(index) * 50,
+          scale: 1,
+          zIndex: 0,
+          shadow: 1,
+          immediate: false,
+        }
 
 function DraggableList({ items }: { items: string[] }) {
-  const order = useRef(items.map((_, index) => index)) // Store indicies as a local ref, this represents the item order
+  const order = React.useRef(items.map((_, index) => index)) // Store indicies as a local ref, this represents the item order
   const [springs, api] = useSprings(items.length, fn(order.current)) // Create springs, each corresponds to an item, controlling its transform, scale, etc.
   const bind = useDrag(({ args: [originalIndex], active, movement: [, y] }) => {
     const curIndex = order.current.indexOf(originalIndex)
@@ -44,9 +46,9 @@ function DraggableList({ items }: { items: string[] }) {
             boxShadow: shadow.to(s => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`),
             y,
             scale,
-          }}
-          children={items[i]}
-        />
+          }}>
+          {items[i]}
+        </animated.div>
       ))}
     </div>
   )

demo/src/sandboxes/exit-before-enter/custom.d.ts

@@ -0,0 +1 @@
+declare module '*.module.css'

demo/src/sandboxes/exit-before-enter/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useState } from 'react'
+import * as React from 'react'
 import {
   useSpringRef,
   animated,
@@ -15,7 +15,7 @@ const IMAGES = [
 ]
 
 export default function App() {
-  const [activeIndex, setActiveIndex] = useState(0)
+  const [activeIndex, setActiveIndex] = React.useState(0)
   const springApi = useSpringRef()
 
   const transitions = useTransition(activeIndex, {
@@ -55,9 +55,9 @@ export default function App() {
     ref: springApi,
   })
 
-  useLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     springApi.start()
-  }, [activeIndex])
+  }, [activeIndex, springApi])
 
   return (
     <div className={styles.container}>

demo/src/sandboxes/floating-button/src/App.tsx

@@ -30,7 +30,7 @@ const App = () => {
 
   const [avatarSprings, avatarApi] = useSprings(
     COLORS.length,
-    i => ({
+    () => ({
       y: 0,
     }),
     []
@@ -47,7 +47,7 @@ const App = () => {
       y: avatarRefInitialPositions.current[i],
       immediate: true,
     }))
-  }, [])
+  }, [avatarApi])
 
   const getBounds = React.useCallback(() => {
     const { height, width } = containerRef.current.getBoundingClientRect()