@tremolo-ui/react 0.0.9 → 0.0.11

package/src/components/Slider/Thumb.tsx

@@ -7,8 +7,9 @@ import {
   useRef,
 } from 'react'
 
-import { useDisabled, useVertical } from './context'
+import { useSliderContext } from './context'
 
+/** @category Slider */
 export interface SliderThumbProps {
   size?: number | string
   width?: number | string
@@ -22,13 +23,16 @@ export interface SliderThumbProps {
   __percent?: number
 }
 
+/** @category Slider */
 export interface SliderThumbMethods {
   focus: () => void
   blur: () => void
 }
 
+/** @category Slider */
 export const defaultThumbSize = 22
 
+/** @category Slider */
 export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
   (
     {
@@ -43,8 +47,9 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
     ref,
   ) => {
     const wrapperRef = useRef<HTMLDivElement>(null)
-    const vertical = useVertical()
-    const disabled = useDisabled()
+    const vertical = useSliderContext((s) => s.vertical)
+    const disabled = useSliderContext((s) => s.disabled)
+    const readonly = useSliderContext((s) => s.readonly)
 
     useImperativeHandle(ref, () => {
       return {
@@ -75,6 +80,7 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
             aria-disabled={disabled}
+            aria-readonly={readonly}
             style={{
               width: size ?? width,
               height: size ?? height,

package/src/components/Slider/Track.tsx

@@ -3,11 +3,12 @@ import { CSSProperties, ReactElement } from 'react'
 
 import { styleHelper, xor } from '@tremolo-ui/functions'
 
-import { useDisabled, useReverse, useVertical } from './context'
+import { useSliderContext } from './context'
 
 export const defaultLength = 140
 export const defaultThickness = 10
 
+/** @category Slider */
 export interface SliderTrackProps {
   length?: number | string
   thickness?: number | string
@@ -15,6 +16,8 @@ export interface SliderTrackProps {
   active?: string
   inactive?: string
 
+  defaultStyle?: boolean
+
   className?: string
   style?: CSSProperties
   children?: ReactElement
@@ -25,6 +28,7 @@ export interface SliderTrackProps {
   __percent?: number
 }
 
+/** @category Slider */
 export function SliderTrack({
   length = defaultLength,
   thickness = defaultThickness,
@@ -33,12 +37,13 @@ export function SliderTrack({
   children,
   className,
   style,
+  defaultStyle = true,
   __thumb,
-  __percent,
+  __percent = 0,
 }: SliderTrackProps) {
-  const vertical = useVertical()
-  const reverse = useReverse()
-  const disabled = useDisabled()
+  const vertical = useSliderContext((s) => s.vertical)
+  const reverse = useSliderContext((s) => s.reverse)
+  const disabled = useSliderContext((s) => s.disabled)
 
   const direction = vertical ? 'bottom' : 'right'
   const colors = {
@@ -50,16 +55,21 @@ export function SliderTrack({
     <div
       className={clsx('tremolo-slider-track', className)}
       aria-disabled={disabled}
-      style={{
-        ...colors,
-        background: xor(vertical, reverse)
-          ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
-          : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`,
-        borderRadius: styleHelper(thickness!, '/', 2),
-        width: !vertical ? length : thickness,
-        height: vertical ? length : thickness,
-        ...style,
-      }}
+      data-vertical={vertical}
+      style={
+        !defaultStyle
+          ? style
+          : {
+              ...colors,
+              background: xor(vertical, reverse)
+                ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
+                : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`,
+              borderRadius: styleHelper(thickness!, '/', 2),
+              width: !vertical ? length : thickness,
+              height: vertical ? length : thickness,
+              ...style,
+            }
+      }
     >
       {children}
       {__thumb}

package/src/components/Slider/context.tsx

@@ -1,14 +1,7 @@
-import { createContext, useState, useContext, ReactNode } from 'react'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
 
-const minContext = createContext(0)
-const maxContext = createContext(0)
-const stepContext = createContext(0)
-const skewContext = createContext(0)
-const verticalContext = createContext(false)
-const reverseContext = createContext(false)
-const disabledContext = createContext(false)
-
-interface Props {
+type State = {
   min: number
   max: number
   step: number
@@ -16,51 +9,57 @@ interface Props {
   vertical: boolean
   reverse: boolean
   disabled: boolean
-  children: ReactNode
+  readonly: boolean
+}
+
+type SliderStore = ReturnType<typeof createSliderStore>
+
+const createSliderStore = (initProps?: Partial<State>) => {
+  const DEFAULT_PROPS: State = {
+    min: 0,
+    max: 0,
+    step: 0,
+    skew: 0,
+    vertical: false,
+    reverse: false,
+    disabled: false,
+    readonly: false,
+  }
+
+  return createStore<State>()(() => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+  }))
 }
 
-export function SliderValuesProvider({
-  min: _min,
-  max: _max,
-  step: _step,
-  skew: _skew,
-  vertical: _vertical,
-  reverse: _reverse,
-  disabled: _disabled,
-  children,
-}: Props) {
-  const [min] = useState(_min)
-  const [max] = useState(_max)
-  const [step] = useState(_step)
-  const [skew] = useState(_skew)
-  const [vertical] = useState(_vertical)
-  const [reverse] = useState(_reverse)
-  const [disabled] = useState(_disabled)
+const SliderContext = createContext<SliderStore | null>(null)
+
+type SliderProviderProps = React.PropsWithChildren<Partial<State>>
+
+export function SliderProvider({ children, ...props }: SliderProviderProps) {
+  const storeRef = useRef<SliderStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createSliderStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.setState(props)
+    } else {
+      storeRef.current = createSliderStore(props)
+    }
+  }, [props])
 
   return (
-    <minContext.Provider value={min}>
-      <maxContext.Provider value={max}>
-        <stepContext.Provider value={step}>
-          <skewContext.Provider value={skew}>
-            <verticalContext.Provider value={vertical}>
-              <reverseContext.Provider value={reverse}>
-                <disabledContext.Provider value={disabled}>
-                  {children}
-                </disabledContext.Provider>
-              </reverseContext.Provider>
-            </verticalContext.Provider>
-          </skewContext.Provider>
-        </stepContext.Provider>
-      </maxContext.Provider>
-    </minContext.Provider>
+    <SliderContext.Provider value={storeRef.current}>
+      {children}
+    </SliderContext.Provider>
   )
 }
 
-export const useMin = () => useContext(minContext)
-export const useMax = () => useContext(maxContext)
-export const useStep = () => useContext(stepContext)
-export const useSkew = () => useContext(skewContext)
-export const useVertical = () => useContext(verticalContext)
-// export const useSetVertical = () => useContext(setVerticalContext)
-export const useReverse = () => useContext(reverseContext)
-export const useDisabled = () => useContext(disabledContext)
+/** @category Slider */
+export function useSliderContext<T>(selector: (state: State) => T): T {
+  const store = useContext(SliderContext)
+  if (!store) throw new Error('Missing SliderContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/Slider/index.css

@@ -35,6 +35,14 @@
 
   position: relative;
 
+  &[data-vertical='false'] {
+    min-width: 50px;
+  }
+
+  &[data-vertical='true'] {
+    min-height: 50px;
+  }
+
   &:hover {
     --active: #6387e9;
     --inactive: #e0e0e0;

package/src/components/Slider/index.tsx

@@ -25,11 +25,12 @@ import { useEventListener } from '../../hooks/useEventListener'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
-import { SliderValuesProvider } from './context'
+import { SliderProvider } from './context'
 import { Scale } from './Scale'
 import { SliderThumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
 import { SliderTrack, SliderTrackProps } from './Track'
 
+/** @category Slider */
 export interface SliderProps {
   // required
   value: number
@@ -67,6 +68,7 @@ export interface SliderProps {
   // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
 }
 
+/** @category Slider */
 export interface SliderMethods {
   focus: () => void
   blur: () => void
@@ -77,6 +79,7 @@ type Props = SliderProps &
 
 /**
  * Customizable slider
+ * @category Slider
  */
 export const Slider = forwardRef<SliderMethods, Props>(
   (
@@ -229,11 +232,11 @@ export const Slider = forwardRef<SliderMethods, Props>(
       [wheel, value, min, max, skew, step],
     )
 
-    useEventListener(window, 'mousemove', (event) => {
+    useEventListener(globalThis.window, 'mousemove', (event) => {
       handleValue(event)
     })
 
-    useEventListener(window, 'mouseup', () => {
+    useEventListener(globalThis.window, 'mouseup', () => {
       thumbDragged.current = false
       if (bodyNoSelect) removeNoSelect()
     })
@@ -250,7 +253,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
     }, [])
 
     return (
-      <SliderValuesProvider
+      <SliderProvider
         min={min}
         max={max}
         step={step}
@@ -258,6 +261,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
         vertical={vertical}
         reverse={reverse}
         disabled={disabled}
+        readonly={readonly}
       >
         <div
           className={clsx('tremolo-slider', className)}
@@ -290,6 +294,8 @@ export const Slider = forwardRef<SliderMethods, Props>(
             style={{
               display: 'flex',
               flexDirection: vertical ? 'row' : 'column',
+              width: !vertical ? '100%' : undefined,
+              height: vertical ? '100%' : undefined,
             }}
           >
             <div className="tremolo-slider-track-wrapper" ref={trackElementRef}>
@@ -308,13 +314,17 @@ export const Slider = forwardRef<SliderMethods, Props>(
             {scaleComponent}
           </div>
         </div>
-      </SliderValuesProvider>
+      </SliderProvider>
     )
   },
 )
 
-export * from './context'
-export * from './Thumb'
-export * from './Track'
-export * from './Scale'
-export * from './ScaleOption'
+export { useSliderContext } from './context'
+export {
+  SliderThumb,
+  type SliderThumbMethods,
+  type SliderThumbProps,
+} from './Thumb'
+export { SliderTrack, type SliderTrackProps } from './Track'
+export { Scale, type ScaleProps } from './Scale'
+export { ScaleOption, type ScaleOptionProps } from './ScaleOption'

package/src/components/WheelObserver/index.tsx

@@ -25,6 +25,7 @@ interface Props<T extends ElementType> {
   onWheel?: (event: WheelEvent) => void
 }
 
+/** @category WheelObserver */
 export function WheelObserver<T extends ElementType = 'div'>(
   props: Props<T> & Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>,
 ) {

package/src/components/XYPad/Area.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { CSSProperties, ReactElement } from 'react'
 
+/** @category XYPad */
 export interface AreaProps {
   width?: number | string
   height?: number | string
@@ -13,6 +14,7 @@ export interface AreaProps {
   __thumb?: ReactElement
 }
 
+/** @category XYPad */
 export function XYPadArea({
   width = 120,
   height = 120,

package/src/components/XYPad/Thumb.tsx

@@ -8,6 +8,7 @@ import {
   useRef,
 } from 'react'
 
+/** @category XYPad */
 export interface ThumbProps {
   size?: number | string
   width?: number | string
@@ -24,6 +25,7 @@ export interface ThumbProps {
   __css?: CSSProperties
 }
 
+/** @category XYPad */
 export interface XYPadThumbMethods {
   focus: () => void
   blur: () => void
@@ -32,6 +34,7 @@ export interface XYPadThumbMethods {
 type Props = ThumbProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof ThumbProps>
 
+/** @category XYPad */
 export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
   (
     {

package/src/components/XYPad/index.tsx

@@ -26,6 +26,7 @@ import { addNoSelect, removeNoSelect } from '../_util'
 import { XYPadArea, AreaProps } from './Area'
 import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
 
+/** @category XYPad */
 export interface ValueOptions {
   // required
   value: number
@@ -46,6 +47,7 @@ export interface ValueOptions {
   keyboard?: InputEventOption | null
 }
 
+/** @category XYPad */
 export interface XYPadProps {
   x: ValueOptions
   y: ValueOptions
@@ -58,6 +60,7 @@ export interface XYPadProps {
   children?: ReactElement | ReactElement[]
 }
 
+/** @category XYPad */
 export interface XYPadMethods {
   focus: () => void
   blur: () => void
@@ -76,6 +79,7 @@ type Props = XYPadProps &
 
 /**
  * Simple XYPad
+ * @category XYPad
  */
 export const XYPad = forwardRef<XYPadMethods, Props>(
   (
@@ -246,11 +250,11 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       [x, y],
     )
 
-    useEventListener(window, 'mousemove', (event) => {
+    useEventListener(globalThis.window, 'mousemove', (event) => {
       handleValue(event)
     })
 
-    useEventListener(window, 'mouseup', () => {
+    useEventListener(globalThis.window, 'mouseup', () => {
       thumbDragged.current = false
       if (bodyNoSelect) removeNoSelect()
     })

package/src/hooks/useAnimationFrame.ts

@@ -0,0 +1,18 @@
+import { DependencyList, useCallback, useEffect, useRef } from 'react'
+
+export const useAnimationFrame = (
+  callback = () => {},
+  deps: DependencyList = [],
+) => {
+  const reqIdRef = useRef(-1)
+  const loop = useCallback(() => {
+    reqIdRef.current = requestAnimationFrame(loop)
+    callback()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [callback, ...deps])
+
+  useEffect(() => {
+    reqIdRef.current = requestAnimationFrame(loop)
+    return () => cancelAnimationFrame(reqIdRef.current)
+  }, [loop])
+}

package/src/hooks/useDrag.ts

@@ -0,0 +1,92 @@
+import { useRef, useCallback } from 'react'
+
+import { useEventListener } from './useEventListener'
+import { useRefCallbackEvent } from './useRefCallbackEvent'
+
+interface Props {
+  threshold?: number
+
+  onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void
+  onDragStart?: () => void
+  onDragEnd?: () => void
+}
+
+/**
+ * @returns [refCallback, pointerDownHandler]
+ */
+export function useDrag<T extends Element>({
+  threshold = 1,
+  onDrag,
+  onDragStart,
+  onDragEnd,
+}: Props): [
+  (div: EventTarget | null) => void,
+  (event: React.PointerEvent<T>) => void,
+] {
+  const dragOffsetX = useRef<number | undefined>(undefined)
+  const dragOffsetY = useRef<number | undefined>(undefined)
+  const dragStartX = useRef(0)
+  const dragStartY = useRef(0)
+
+  const handleDrag = useCallback(
+    (
+      event: MouseEvent | React.MouseEvent<T, MouseEvent> | TouchEvent,
+      first = false,
+    ) => {
+      const isTouch = event instanceof TouchEvent
+      if (isTouch && event.cancelable) event.preventDefault()
+      const screenX = isTouch ? event.touches[0].screenX : event.screenX
+      const screenY = isTouch ? event.touches[0].screenY : event.screenY
+      let deltaX = 0
+      let deltaY = 0
+      if (first) {
+        dragStartX.current = screenX
+        dragStartY.current = screenY
+      }
+      if (dragOffsetX.current) {
+        deltaX = screenX - dragOffsetX.current
+        dragOffsetX.current = screenX
+      }
+      if (dragOffsetY.current) {
+        deltaY = screenY - dragOffsetY.current
+        dragOffsetY.current = screenY
+      }
+      if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) return
+      if (onDrag)
+        onDrag(
+          screenX - dragStartX.current,
+          screenY - dragStartY.current,
+          deltaX,
+          deltaY,
+        )
+    },
+    [threshold, onDrag],
+  )
+
+  const refHandler = useRefCallbackEvent(
+    'touchmove',
+    handleDrag,
+    { passive: false },
+    [onDrag],
+  )
+
+  const pointerDownHandler = useCallback(
+    (event: React.PointerEvent<T>) => {
+      dragOffsetX.current = event.screenX
+      dragOffsetY.current = event.screenY
+      handleDrag(event, true)
+      onDragStart?.()
+    },
+    [handleDrag, onDragStart],
+  )
+
+  useEventListener(globalThis.window, 'mousemove', handleDrag)
+
+  useEventListener(globalThis.window, 'pointerup', () => {
+    dragOffsetX.current = undefined
+    dragOffsetY.current = undefined
+    onDragEnd?.()
+  })
+
+  return [refHandler, pointerDownHandler]
+}

package/src/hooks/useRefCallbackEvent.ts

@@ -1,20 +1,17 @@
 import { useMemo } from 'react'
 
-type Options = boolean | AddEventListenerOptions
-type CallbackFunc = (div: EventTarget | null) => void
-
 export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
   event: K,
   handler: (event: DocumentEventMap[K]) => void,
-  options?: Options,
+  options?: boolean | AddEventListenerOptions,
   deps?: React.DependencyList,
-): CallbackFunc
+): (div: EventTarget | null) => void
 export function useRefCallbackEvent(
   event: string,
   handler: (event: Event) => void,
-  options?: Options,
+  options?: boolean | AddEventListenerOptions,
   deps: React.DependencyList = [],
-): CallbackFunc {
+): (div: EventTarget | null) => void {
   return useMemo(() => {
     let cleanup: (() => void) | undefined
     return (node: EventTarget | null) => {