@tremolo-ui/react 0.1.5 → 0.2.0

package/src/components/Slider/index.tsx

@@ -27,8 +27,9 @@ import { addNoSelect, removeNoSelect } from '../_util'
 
 import { SliderProvider } from './context'
 import { Scale } from './Scale'
-import { SliderThumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
-import { SliderTrack, SliderTrackProps } from './Track'
+import { ScaleOption } from './ScaleOption'
+import { Thumb, SliderThumbMethods, SliderThumbProps } from './Thumb'
+import { Track, SliderTrackProps } from './Track'
 
 /** @category Slider */
 export interface SliderProps {
@@ -81,11 +82,7 @@ export interface SliderMethods {
 type Props = SliderProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof SliderProps>
 
-/**
- * Customizable slider
- * @category Slider
- */
-export const Slider = forwardRef<SliderMethods, Props>(
+const SliderImpl = forwardRef<SliderMethods, Props>(
   (
     {
       value,
@@ -112,7 +109,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
       onKeyDown,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
     // -- state and ref ---
     const trackElementRef = useRef<HTMLDivElement>(null)
@@ -138,9 +135,9 @@ export const Slider = forwardRef<SliderMethods, Props>(
     if (children != undefined) {
       React.Children.forEach(children, (child) => {
         if (React.isValidElement(child)) {
-          if (child.type == SliderThumb) {
+          if (child.type == Thumb) {
             thumbProps = child.props as SliderThumbProps
-          } else if (child.type == SliderTrack) {
+          } else if (child.type == Track) {
             trackProps = child.props as SliderTrackProps
           } else if (child.type == Scale) {
             scaleComponent = child
@@ -245,7 +242,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
       [wheel, vertical, readonly, onChange, updateValueByEvent],
     )
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
           thumbRef.current?.focus()
@@ -312,14 +309,10 @@ export const Slider = forwardRef<SliderMethods, Props>(
             }}
           >
             <div className="tremolo-slider-track-wrapper" ref={trackElementRef}>
-              <SliderTrack
+              <Track
                 __percent={percent}
                 __thumb={
-                  <SliderThumb
-                    ref={thumbRef}
-                    __percent={percent}
-                    {...thumbProps}
-                  />
+                  <Thumb ref={thumbRef} __percent={percent} {...thumbProps} />
                 }
                 {...trackProps}
               />
@@ -332,13 +325,20 @@ export const Slider = forwardRef<SliderMethods, Props>(
   },
 )
 
+/**
+ * Customizable slider
+ * @category Slider
+ */
+export const Slider = Object.assign(SliderImpl, {
+  Thumb,
+  Track,
+  Scale,
+  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'
+export { type SliderThumbMethods, type SliderThumbProps } from './Thumb'
+export { type SliderTrackProps } from './Track'
+export { type ScaleProps } from './Scale'
+export { type ScaleOptionProps } from './ScaleOption'
 export { type ScaleOptions, type ScaleType } from './type'

package/src/components/XYPad/Area.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
 
 /** @category XYPad */
-export interface AreaProps {
+export interface XYPadAreaProps {
   width?: number | string
   height?: number | string
   color?: string
@@ -15,7 +15,7 @@ export interface AreaProps {
 }
 
 /** @category XYPad */
-export function XYPadArea({
+export function Area({
   width = 120,
   height = 120,
   color,
@@ -24,7 +24,8 @@ export function XYPadArea({
   style,
   __thumb,
   ...props
-}: AreaProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AreaProps>) {
+}: XYPadAreaProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadAreaProps>) {
   return (
     <div
       className={clsx('tremolo-xy-pad-area', className)}

package/src/components/XYPad/Thumb.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react'
 
 /** @category XYPad */
-export interface ThumbProps {
+export interface XYPadThumbProps {
   size?: number | string
   width?: number | string
   height?: number | string
@@ -24,6 +24,8 @@ export interface ThumbProps {
   /** @internal */
   __disabled?: boolean
   /** @internal */
+  __readonly?: boolean
+  /** @internal */
   __css?: CSSProperties
 }
 
@@ -33,11 +35,11 @@ export interface XYPadThumbMethods {
   blur: () => void
 }
 
-type Props = ThumbProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof ThumbProps>
+type Props = XYPadThumbProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadThumbProps>
 
 /** @category XYPad */
-export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
+export const Thumb = forwardRef<XYPadThumbMethods, Props>(
   (
     {
       size,
@@ -50,6 +52,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
       className,
       style,
       __disabled,
+      __readonly,
       __css,
       ...props
     }: Props,
@@ -87,6 +90,7 @@ export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
             // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
             tabIndex={0}
             aria-disabled={__disabled}
+            aria-readonly={__readonly}
             style={{
               ...{ '--color': color },
               width: size ?? width,

package/src/components/XYPad/index.css

@@ -4,7 +4,7 @@
 }
 
 .tremolo-xy-pad-area {
-  --color: #eee;
+  --color: oklch(95% 0 0);
 
   position: relative;
   background-color: var(--color);
@@ -17,18 +17,32 @@
 }
 
 .tremolo-xy-pad-thumb {
-  --color: var(--tremolo-theme-color);
+  --color: oklch(59.5% 0.17548 266.373);
 
   border-radius: 50%;
   outline: none;
   background-color: var(--color);
 
   &[aria-disabled='true'] {
-    background-color: #5d6478;
+    background-color: oklch(50.462% 0.03307 270.021);
   }
 
-  &:focus {
+  &[aria-readonly='false']:focus {
     box-shadow: 0px 0px 0px 3px
       color-mix(in srgb, var(--color) 20%, transparent);
   }
 }
+
+:where(.dark, [data-theme='dark']) {
+  .tremolo-xy-pad-area {
+    --color: oklch(41.7% 0 0);
+  }
+
+  .tremolo-xy-pad-thumb {
+    --color: oklch(64.5% 0.17548 266.373);
+
+    &:hover {
+      --color: oklch(67.5% 0.17548 266.373);
+    }
+  }
+}

package/src/components/XYPad/index.tsx

@@ -23,8 +23,8 @@ import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 import { addNoSelect, removeNoSelect } from '../_util'
 
-import { XYPadArea, AreaProps } from './Area'
-import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
+import { Area, XYPadAreaProps } from './Area'
+import { Thumb, XYPadThumbMethods, XYPadThumbProps } from './Thumb'
 
 /**
  * Two-dimensional slider component.
@@ -82,11 +82,7 @@ const defaultValueOptions = {
 type Props = XYPadProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadProps>
 
-/**
- * Simple XYPad
- * @category XYPad
- */
-export const XYPad = forwardRef<XYPadMethods, Props>(
+export const XYPadImpl = forwardRef<XYPadMethods, Props>(
   (
     {
       x: _x,
@@ -106,7 +102,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       children,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
     const x = useMemo(() => {
       return { ...defaultValueOptions, ..._x }
@@ -125,15 +121,15 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
     const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100)
     const percentY = toFixed((y.reverse ? 1 - ny : ny) * 100)
 
-    let areaProps: AreaProps = {}
-    let thumbProps: ThumbProps = {}
+    let areaProps: XYPadAreaProps = {}
+    let thumbProps: XYPadThumbProps = {}
     if (children != undefined) {
       React.Children.forEach(children, (child) => {
         if (React.isValidElement(child)) {
-          if (child.type == XYPadThumb) {
-            thumbProps = child.props as ThumbProps
-          } else if (child.type == XYPadArea) {
-            areaProps = child.props as AreaProps
+          if (child.type == Thumb) {
+            thumbProps = child.props as XYPadThumbProps
+          } else if (child.type == Area) {
+            areaProps = child.props as XYPadAreaProps
           } else {
             throw new Error('only <XYPadThumb> or <XYPadArea>')
           }
@@ -276,7 +272,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       [x, y, onChange, readonly, updateValueByEvent],
     )
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
           thumbRef.current?.focus()
@@ -323,11 +319,12 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
         {...props}
       >
         <div className="tremolo-xy-pad-area-wrapper" ref={areaElementRef}>
-          <XYPadArea
+          <Area
             __thumb={
-              <XYPadThumb
+              <Thumb
                 ref={thumbRef}
                 __disabled={disabled}
+                __readonly={readonly}
                 __css={{
                   top: `${percentY}%`,
                   left: `${percentX}%`,
@@ -343,5 +340,14 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
   },
 )
 
-export * from './Thumb'
-export * from './Area'
+/**
+ * Simple XYPad
+ * @category XYPad
+ */
+export const XYPad = Object.assign(XYPadImpl, {
+  Thumb,
+  Area,
+})
+
+export { type XYPadThumbProps, type XYPadThumbMethods } from './Thumb'
+export { type XYPadAreaProps } from './Area'

package/src/hooks/useAnimationFrame.ts

@@ -1,5 +1,8 @@
 import { DependencyList, useCallback, useEffect, useRef } from 'react'
 
+/**
+ * @category hooks
+ */
 export function useAnimationFrame(
   callback = () => {},
   deps: DependencyList = [],

package/src/hooks/useCallbackRef.ts

@@ -1,8 +1,8 @@
 import { useCallback, useInsertionEffect, useRef } from 'react'
 
 /**
- * This hook is user-land implementation of the experimental `useEffectEvent` hook.
- * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ * Internal
+ * @private
  */
 export function useCallbackRef<Args extends unknown[], Return>(
   callback: ((...args: Args) => Return) | undefined,

package/src/hooks/useDrag.ts

@@ -3,7 +3,7 @@ import { useRef, useCallback } from 'react'
 import { useEventListener } from './useEventListener'
 import { useRefCallbackEvent } from './useRefCallbackEvent'
 
-export interface UseDragProps {
+interface UseDragProps {
   threshold?: number
 
   onDrag: (x: number, y: number, deltaX: number, deltaY: number) => void
@@ -12,6 +12,7 @@ export interface UseDragProps {
 }
 
 /**
+ * @category hooks
  * @returns [refCallback, pointerDownHandler]
  */
 export function useDrag<T extends Element>({

package/src/hooks/useDragWithElement.ts

@@ -5,7 +5,7 @@ import { normalizeValue } from '@tremolo-ui/functions'
 import { useEventListener } from './useEventListener'
 import { useRefCallbackEvent } from './useRefCallbackEvent'
 
-export interface UseDragWithElementProps<T extends Element> {
+interface UseDragWithElementProps<T extends Element> {
   baseElementRef: RefObject<T | null>
   onDrag: (normalizedX: number, normalizedY: number) => void
   onDragStart?: (normalizedX: number, normalizedY: number) => void
@@ -13,6 +13,7 @@ export interface UseDragWithElementProps<T extends Element> {
 }
 
 /**
+ * @category hooks
  * @returns [refCallback, pointerDownHandler]
  */
 export function useDragWithElement<T extends Element>({

package/src/hooks/useEventListener.ts

@@ -5,6 +5,9 @@ import { useCallbackRef } from './useCallbackRef'
 type Target = EventTarget | null | (() => EventTarget | null)
 type Options = boolean | AddEventListenerOptions
 
+/**
+ * @category hooks
+ */
 export function useEventListener<K extends keyof DocumentEventMap>(
   target: Target,
   event: K,

package/src/hooks/useInterval.ts

@@ -1,5 +1,8 @@
 import { useEffect, useRef } from 'react'
 
+/**
+ * @category hooks
+ */
 export function useInterval(callback: () => void, delay: number | null) {
   const savedCallback = useRef(callback)
 

package/src/hooks/useLongPress.ts

@@ -3,6 +3,9 @@ import { useCallback, useState } from 'react'
 import { useEventListener } from './useEventListener'
 import { useInterval } from './useInterval'
 
+/**
+ * @category hooks
+ */
 export function useLongPress(
   callback: () => void,
   initialDelay = 500,

package/src/hooks/useMIDIAccess.ts

@@ -0,0 +1,40 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/** @private */
+export const PERMISSION_DENIED = 'PERMISSION_DENIED'
+/** @private */
+export const NOT_SUPPORTED = 'NOT_SUPPORTED'
+
+/** @private */
+export type MIDIAccessError = typeof PERMISSION_DENIED | typeof NOT_SUPPORTED
+
+/**
+ * Hooks for requesting MIDI access in the browser. The first argument allows you to choose whether to request access on mount.
+ * @category hooks
+ */
+export function useMIDIAccess(requestOnMount = true) {
+  const [midiAccess, setMidiAccess] = useState<MIDIAccess | null>(null)
+  const [error, setError] = useState<MIDIAccessError | null>(null)
+
+  const request = useCallback(() => {
+    if (navigator.requestMIDIAccess) {
+      navigator
+        .requestMIDIAccess()
+        .then((access) => {
+          setMidiAccess(access)
+          setError(null)
+        })
+        .catch(() => {
+          setError(PERMISSION_DENIED)
+        })
+    } else {
+      setError(NOT_SUPPORTED)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (requestOnMount) request()
+  }, [requestOnMount, request])
+
+  return { request, midiAccess, error }
+}

package/src/hooks/useMIDIInput.ts

@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+
+import { useMIDIMessage } from './useMIDIMessage'
+
+const MIDI_EVENT_TO_NUMBER = {
+  NOTE_ON: 0x90,
+  NOTE_OFF: 0x80,
+  PITCH_BEND: 0xe0,
+}
+
+// const NUMBER_TO_MIDI_EVENT: Record<number, string> = {
+//   0x90: 'NOTE_ON',
+//   0x80: 'NOTE_OFF',
+//   0xe0: 'PITCH_BEND',
+// }
+
+/**
+ * Hooks for handling note on/off events. To be used with useMIDIAccess. Internally uses useMIDIMessage.
+ * @category hooks
+ */
+export function useMIDIInput(
+  midiAccess: MIDIAccess | null,
+  onNoteOnEvent?: (note: number, velocity: number) => void,
+  onNoteOffEvent?: (note: number) => void,
+  onPitchBendEvent?: (msb: number, lsb: number) => void,
+) {
+  const handleMIDIMessage = useCallback(
+    (event: MIDIMessageEvent) => {
+      if (!event.data) return
+      // event.data[0] ... command
+      // event.data[1] ... note, MSB (Most Significant Byte)
+      // event.data[2] ... velocity, LSB (Least Significant Byte)
+      const kind = event.data[0] & 0xf0
+
+      if (
+        kind == MIDI_EVENT_TO_NUMBER.NOTE_OFF ||
+        (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON && event.data[2] == 0)
+      ) {
+        onNoteOffEvent?.(event.data[1])
+      } else if (kind == MIDI_EVENT_TO_NUMBER.NOTE_ON) {
+        onNoteOnEvent?.(event.data[1], event.data[2])
+      } else if (kind == MIDI_EVENT_TO_NUMBER.PITCH_BEND) {
+        onPitchBendEvent?.(event.data[1], event.data[2])
+      }
+    },
+    [onNoteOffEvent, onNoteOnEvent, onPitchBendEvent],
+  )
+
+  useMIDIMessage(midiAccess, handleMIDIMessage)
+}

package/src/hooks/useMIDIMessage.ts

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+
+/**
+ * Hooks for when you want to process MIDI events in more detail than useMIDIInput.
+ * @category hooks
+ */
+export function useMIDIMessage(
+  midiAccess: MIDIAccess | null,
+  onMIDIMessage: (event: MIDIMessageEvent) => void,
+) {
+  useEffect(() => {
+    if (!midiAccess) return
+
+    for (const input of midiAccess.inputs.values()) {
+      input.addEventListener('midimessage', onMIDIMessage)
+    }
+
+    return () => {
+      for (const input of midiAccess.inputs.values()) {
+        input.removeEventListener('midimessage', onMIDIMessage)
+      }
+    }
+  }, [midiAccess, onMIDIMessage])
+}

package/src/hooks/useRefCallbackEvent.ts

@@ -1,5 +1,9 @@
 import { useMemo } from 'react'
 
+/**
+ * Internal
+ * @private
+ */
 export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
   event: K,
   handler: (event: DocumentEventMap[K]) => void,

package/src/index.ts

@@ -7,8 +7,8 @@ import './components/Slider/index.css'
 import './components/XYPad/index.css'
 
 export {
-  type AbsoluteSizingProps,
   AnimationCanvas,
+  type AbsoluteSizingProps,
   type AnimationCanvasProps,
   type CommonProps,
   type DrawFunction,
@@ -17,72 +17,67 @@ export {
 } from './components/AnimationCanvas'
 export {
   AnimationKnob,
-  type AnimationKnobMethods,
   type AnimationKnobProps,
+  type AnimationKnobMethods,
 } from './components/AnimationKnob'
 export { DragObserver, type DragObserverProps } from './components/DragObserver'
-export { Knob, type KnobMethods, type KnobProps } from './components/Knob'
+export { Knob, type KnobProps, type KnobMethods } from './components/Knob'
 export {
-  DecrementStepper,
-  type DecrementStepperProps,
-  IncrementStepper,
-  type IncrementStepperProps,
   NumberInput,
-  type NumberInputMethods,
   type NumberInputProps,
-  Stepper,
+  type NumberInputMethods,
   type StepperProps,
+  type IncrementStepperProps,
+  type DecrementStepperProps,
 } from './components/NumberInput'
 export {
-  BlackKey,
-  KeyLabel,
-  type KeyLabelProps,
-  type KeyMethods,
-  type KeyProps,
-  type KeyboardShortcuts,
   Piano,
-  type PianoProps,
-  SHORTCUTS,
-  WhiteKey,
   getNoteRangeArray,
+  SHORTCUTS,
+  type PianoProps,
+  type PianoMethods,
+  type KeyProps,
+  type KeyMethods,
+  type KeyLabelProps,
+  type KeyboardShortcuts,
 } from './components/Piano'
 export {
-  Scale,
-  ScaleOption,
+  Slider,
+  useSliderContext,
   type ScaleOptionProps,
   type ScaleProps,
-  Slider,
   type SliderMethods,
   type SliderProps,
-  SliderThumb,
   type SliderThumbMethods,
   type SliderThumbProps,
-  SliderTrack,
   type SliderTrackProps,
-  useSliderContext,
 } from './components/Slider'
 export {
   WheelObserver,
   type WheelObserverProps,
 } from './components/WheelObserver'
 export {
-  type AreaProps,
-  type ThumbProps,
-  type ValueOptions,
   XYPad,
-  XYPadArea,
-  type XYPadMethods,
   type XYPadProps,
-  XYPadThumb,
+  type XYPadMethods,
+  type XYPadAreaProps,
+  type XYPadThumbProps,
   type XYPadThumbMethods,
+  type ValueOptions,
 } from './components/XYPad'
 
+// hooks
 export { useAnimationFrame } from './hooks/useAnimationFrame'
-export { useDrag, type UseDragProps } from './hooks/useDrag'
-export {
-  useDragWithElement,
-  type UseDragWithElementProps,
-} from './hooks/useDragWithElement'
+export { useDrag } from './hooks/useDrag'
+export { useDragWithElement } from './hooks/useDragWithElement'
 export { useEventListener } from './hooks/useEventListener'
 export { useInterval } from './hooks/useInterval'
 export { useLongPress } from './hooks/useLongPress'
+export {
+  useMIDIAccess,
+  NOT_SUPPORTED,
+  PERMISSION_DENIED,
+  type MIDIAccessError,
+} from './hooks/useMIDIAccess'
+export { useMIDIInput } from './hooks/useMIDIInput'
+export { useMIDIMessage } from './hooks/useMIDIMessage'

package/src/styles/global.css

@@ -1,7 +1,3 @@
-:root {
-  --tremolo-theme-color: #4e76e6;
-}
-
 .tremolo-no-select {
   user-select: none;
 }