@tremolo-ui/react 0.0.9 → 0.0.11

package/src/components/Knob/index.tsx

@@ -10,10 +10,11 @@ import {
   stepValue,
 } from '@tremolo-ui/functions'
 
-import { useEventListener } from '../../hooks/useEventListener'
+import { useDrag } from '../../hooks/useDrag'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
+/** @category Knob */
 export interface KnobProps {
   // required
   value: number
@@ -69,6 +70,7 @@ export interface KnobProps {
   onChange?: (value: number) => void
 }
 
+/** @category Knob */
 export function Knob({
   value,
   min,
@@ -93,8 +95,7 @@ export function Knob({
   classes,
   ...props
 }: KnobProps & Omit<ComponentPropsWithoutRef<'svg'>, keyof KnobProps>) {
-  // -- state and ref ---
-  const dragOffsetY = useRef<number | undefined>(undefined)
+  const valueRef = useRef(0)
 
   // --- interpret props ---
   const padding = 8 // %
@@ -105,27 +106,15 @@ export function Knob({
   const s = normalizeValue(startValue, min, max, skew)
 
   // --- internal functions ---
-  const handleEvent = (
-    event:
-      | MouseEvent
-      | React.MouseEvent<HTMLOrSVGElement, MouseEvent>
-      | TouchEvent,
-  ) => {
-    if (!onChange || readonly) return
-    const isTouch = event instanceof TouchEvent
-    if (isTouch && event.cancelable) event.preventDefault()
-    if (dragOffsetY.current) {
-      if (bodyNoSelect) addNoSelect()
-      const screenY = isTouch ? event.touches[0].screenY : event.screenY
-      const delta = dragOffsetY.current - screenY
-      if (Math.abs(delta) < 1) return
-      dragOffsetY.current = screenY
-      const n = normalizeValue(value, min, max, skew)
-      const v = rawValue(n + delta / 100, min, max, skew)
+  const onDrag = useCallback(
+    (_x: number, y: number) => {
+      if (!onChange || readonly) return
+      const v = rawValue(valueRef.current - y / 100, min, max, skew)
       const v2 = clamp(stepValue(v, step), min, max)
       onChange(v2)
-    }
-  }
+    },
+    [max, min, onChange, readonly, skew, step],
+  )
 
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLOrSVGElement>) => {
@@ -149,6 +138,17 @@ export function Knob({
   )
 
   // --- hooks ---
+  const [touchMoveRefCallback, pointerDownHandler] = useDrag<SVGElement>({
+    onDrag: onDrag,
+    onDragStart: () => {
+      valueRef.current = normalizeValue(value, min, max, skew)
+      if (bodyNoSelect) addNoSelect()
+    },
+    onDragEnd: () => {
+      if (bodyNoSelect) removeNoSelect()
+    },
+  })
+
   const wheelRefCallback = useRefCallbackEvent(
     'wheel',
     (event) => {
@@ -168,20 +168,6 @@ export function Knob({
     [wheel, value, min, max, skew, step, onChange],
   )
 
-  const touchMoveRefCallback = useRefCallbackEvent(
-    'touchmove',
-    handleEvent,
-    { passive: false },
-    [value, min, max, skew, step, onChange, bodyNoSelect],
-  )
-
-  useEventListener(window, 'mousemove', handleEvent)
-
-  useEventListener(window, 'pointerup', () => {
-    dragOffsetY.current = undefined
-    if (bodyNoSelect) removeNoSelect()
-  })
-
   const center = size / 2
   const r1 = -135
   const r2 = -135 + Math.min(p, s) * 270
@@ -211,10 +197,7 @@ export function Knob({
       aria-valuemax={max}
       aria-disabled={disabled}
       aria-readonly={readonly}
-      onPointerDown={(event) => {
-        dragOffsetY.current = event.screenY
-        handleEvent(event)
-      }}
+      onPointerDown={pointerDownHandler}
       onDoubleClick={() => {
         if (enableDoubleClickDefault && onChange) {
           onChange(defaultValue)

package/src/components/NumberInput/DecrementStepper.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { useNumberInputContext } from './context'
+
+export interface DecrementStepperProps {
+  size?: number
+  children?: ReactNode
+}
+
+export function DecrementStepper({
+  size = 12,
+  children,
+  className,
+  ...props
+}: DecrementStepperProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof DecrementStepperProps>) {
+  const min = useNumberInputContext((s) => s.min)
+  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+  const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange)
+  const decrement = useNumberInputContext((s) => s.decrement)
+
+  // TODO: add long press event
+
+  return (
+    <div
+      className={clsx('tremolo-number-input-decrement-stepper', className)}
+      role="button"
+      tabIndex={-1}
+      aria-disabled={
+        keepWithinRange && valueAsNumber <= (min ?? Number.MIN_SAFE_INTEGER)
+      }
+      onPointerDown={decrement}
+      {...props}
+    >
+      {children || (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      )}
+    </div>
+  )
+}

package/src/components/NumberInput/IncrementStepper.tsx

@@ -0,0 +1,52 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { useNumberInputContext } from './context'
+
+export interface IncrementStepperProps {
+  size?: number
+  children?: ReactNode
+}
+
+export function IncrementStepper({
+  size = 12,
+  children,
+  className,
+  ...props
+}: IncrementStepperProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof IncrementStepperProps>) {
+  const max = useNumberInputContext((s) => s.max)
+  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
+  const keepWithinRange = useNumberInputContext((s) => s.keepWithinRange)
+  const increment = useNumberInputContext((s) => s.increment)
+
+  // TODO: add long press event
+
+  return (
+    <div
+      className={clsx('tremolo-number-input-increment-stepper', className)}
+      role="button"
+      tabIndex={-1}
+      aria-disabled={
+        keepWithinRange && valueAsNumber >= (max ?? Number.MAX_SAFE_INTEGER)
+      }
+      onPointerDown={increment}
+      {...props}
+    >
+      {children || (
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="18 15 12 9 6 15" />
+        </svg>
+      )}
+    </div>
+  )
+}

package/src/components/NumberInput/Stepper.tsx

@@ -0,0 +1,25 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+export interface StepperProps {
+  /** Display only when hovering. */
+  dynamic?: boolean
+  children?: ReactNode
+}
+
+export function Stepper({
+  dynamic = true,
+  children,
+  className,
+  ...props
+}: StepperProps & Omit<ComponentPropsWithoutRef<'div'>, keyof StepperProps>) {
+  return (
+    <div
+      className={clsx('tremolo-number-input-stepper', className)}
+      data-dynamic={dynamic}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/NumberInput/context.tsx

@@ -0,0 +1,150 @@
+import { createContext, useContext, useEffect, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { clamp } from '@tremolo-ui/functions'
+import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
+
+type State = {
+  value: string
+  valueAsNumber: number
+  min?: number
+  max?: number
+  step?: number
+  keepWithinRange?: boolean
+  units?: string | Units
+  digit?: number
+  onChange?: (value: number, text: string) => void
+}
+
+type Action = {
+  increment: () => void
+  decrement: () => void
+  change: (value: string) => void
+}
+
+type NumberInputStore = ReturnType<typeof createNumberInputStore>
+
+type ProviderProps = Partial<Omit<State, 'value'> & { value: number | string }>
+
+export function safeClamp(
+  value: number,
+  min = Number.MIN_SAFE_INTEGER,
+  max = Number.MAX_SAFE_INTEGER,
+) {
+  return clamp(value, min, max)
+}
+
+const createNumberInputStore = (initProps?: ProviderProps) => {
+  const DEFAULT_PROPS: State = {
+    value: '',
+    valueAsNumber: 0,
+    min: 0,
+    max: 0,
+    step: 1,
+    keepWithinRange: true,
+    onChange: (_v: number, _t: string) => {},
+  }
+
+  return createStore<State & Action>()((set) => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+    ...{
+      value: parseValue(
+        String(initProps?.value || ''),
+        initProps?.units,
+        initProps?.digit,
+      ).formatValue,
+      valueAsNumber: parseValue(
+        String(initProps?.value || ''),
+        initProps?.units,
+        initProps?.digit,
+      ).rawValue,
+    },
+    increment: () =>
+      set((state) => {
+        let next =
+          parseValue(state.value, state.units, state.digit).rawValue +
+          (state.step ?? 1)
+        if (state.keepWithinRange) {
+          next = safeClamp(next, state.min, state.max)
+        }
+        const v = parseValue(String(next), state.units, state.digit).formatValue
+        state?.onChange?.(next, v)
+        return {
+          value: v,
+          valueAsNumber: next,
+        }
+      }),
+    decrement: () =>
+      set((state) => {
+        let next =
+          parseValue(state.value, state.units, state.digit).rawValue -
+          (state.step ?? 1)
+        if (state.keepWithinRange) {
+          next = safeClamp(next, state.min, state.max)
+        }
+        const v = parseValue(String(next), state.units, state.digit).formatValue
+        state?.onChange?.(next, v)
+        return {
+          value: v,
+          valueAsNumber: next,
+        }
+      }),
+    change: (value) =>
+      set((state) => {
+        const v = value ?? ''
+        return {
+          value: v,
+          valueAsNumber: parseValue(v, state.units, state.digit).rawValue,
+        }
+      }),
+  }))
+}
+
+const NumberInputContext = createContext<NumberInputStore | null>(null)
+
+type NumberInputProviderProps = React.PropsWithChildren<ProviderProps>
+
+export function NumberInputProvider({
+  children,
+  ...props
+}: NumberInputProviderProps) {
+  const storeRef = useRef<NumberInputStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createNumberInputStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      const parsed = parseValue(
+        String(props?.value || ''),
+        props?.units,
+        props?.digit,
+      )
+      storeRef.current.setState({
+        ...props,
+        ...{
+          value: parsed.formatValue,
+          valueAsNumber: parsed.rawValue,
+        },
+      })
+    } else {
+      storeRef.current = createNumberInputStore(props)
+    }
+  }, [props])
+
+  return (
+    <NumberInputContext.Provider value={storeRef.current}>
+      {children}
+    </NumberInputContext.Provider>
+  )
+}
+
+/** @category NumberInput */
+export function useNumberInputContext<T>(
+  selector: (state: State & Action) => T,
+): T {
+  const store = useContext(NumberInputContext)
+  if (!store) throw new Error('Missing NumberInputContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/NumberInput/index.css

@@ -1,26 +1,114 @@
-.tremolo-number-input {
-  display: inline-block;
-  background-color: inherit;
-  font: inherit;
-  margin: 0px;
-  padding-top: 6px;
-  padding-bottom: 6px;
-  padding-left: 10px;
-  padding-right: 10px;
+.tremolo-number-input-wrapper {
+  --tremolo-number-input-border-radius: 4px;
+  --tremolo-number-input-stepper-width: 20px;
+
+  display: inline-flex;
+  flex-direction: row;
+  position: relative;
+
   border-style: solid;
   border-width: 1px;
   border-color: #bbb;
-  border-radius: 4px;
-  outline: 0px;
-  transition: all 0.1s linear;
-  appearance: textfield;
+  border-radius: var(--tremolo-number-input-border-radius);
+
+  width: 140px;
+  height: min-content;
 
   &:hover {
     border-color: var(--tremolo-theme-color);
   }
 
-  &:focus {
+  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
+    border-color: #f34343;
+  }
+
+  &:focus-within {
     border-color: var(--tremolo-theme-color);
     box-shadow: 0px 0px 0px 2px rgba(var(--tremolo-theme-color-rgb), 0.1);
   }
+
+  &[data-stepper='false'] {
+    --tremolo-number-input-stepper-width: 0px;
+  }
+}
+
+.tremolo-number-input {
+  display: block;
+  width: calc(100% - 20px - var(--tremolo-number-input-stepper-width));
+  background-color: inherit;
+  font: inherit;
+  padding: 6px 10px;
+
+  margin: 0;
+  border: none;
+  outline: none;
+  appearance: textfield;
+}
+
+.tremolo-number-input-stepper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: var(--tremolo-number-input-stepper-width);
+  transition: all 0.1s linear;
+
+  &[data-dynamic='true'] {
+    opacity: 0;
+    transform: translateX(40%);
+  }
+}
+
+.tremolo-number-input-wrapper:hover .tremolo-number-input-stepper {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.tremolo-number-input-increment-stepper {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: #ccc;
+  font-size: calc(0.75rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 0%;
+  max-height: 50%;
+  user-select: none;
+  cursor: pointer;
+  border-top-right-radius: var(--tremolo-number-input-border-radius);
+
+  &[aria-disabled='false']:active {
+    background-color: #3443560e;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-number-input-decrement-stepper {
+  border-inline-start-width: 1px;
+  border-inline-start-style: solid;
+  border-inline-start-color: #ccc;
+  border-top: 1px solid #ccc;
+  font-size: calc(0.75rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 0%;
+  max-height: 50%;
+  user-select: none;
+  cursor: pointer;
+  border-bottom-right-radius: var(--tremolo-number-input-border-radius);
+
+  &[aria-disabled='false']:active {
+    background-color: #3443560e;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
 }