@tremolo-ui/react 0.1.4 → 0.1.6

package/src/components/Slider/index.tsx

@@ -112,7 +112,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
       onKeyDown,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
     // -- state and ref ---
     const trackElementRef = useRef<HTMLDivElement>(null)
@@ -245,7 +245,7 @@ export const Slider = forwardRef<SliderMethods, Props>(
       [wheel, vertical, readonly, onChange, updateValueByEvent],
     )
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
           thumbRef.current?.focus()
@@ -341,3 +341,4 @@ export {
 export { SliderTrack, type SliderTrackProps } from './Track'
 export { Scale, type ScaleProps } from './Scale'
 export { ScaleOption, type ScaleOptionProps } from './ScaleOption'
+export { type ScaleOptions, type ScaleType } from './type'

package/src/components/Slider/type.ts

@@ -0,0 +1,26 @@
+import { decimalPart, toFixed } from '@tremolo-ui/functions'
+
+export type ScaleType = 'mark' | 'mark-number' | 'number'
+export type ScaleOptions = ['step', ScaleType] | [number, ScaleType]
+
+export function generateOptionsList(
+  options: ScaleOptions,
+  min: number,
+  max: number,
+  step: number,
+) {
+  const optionsList: {
+    value: number
+    type: ScaleType
+  }[] = []
+  const per = options[0] == 'step' ? step : options[0]
+  const count = Math.floor(max / per) - Math.ceil(min / per) + 1
+  for (let i = 0; i < count; i++) {
+    const value = toFixed(
+      per * (Math.ceil(min / per) + i),
+      decimalPart(per)?.length,
+    )
+    optionsList.push({ value: value, type: options[1] })
+  }
+  return optionsList
+}

package/src/components/XYPad/index.tsx

@@ -106,7 +106,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       children,
       ...props
     }: Props,
-    ref,
+    forwardedRef,
   ) => {
     const x = useMemo(() => {
       return { ...defaultValueOptions, ..._x }
@@ -276,7 +276,7 @@ export const XYPad = forwardRef<XYPadMethods, Props>(
       [x, y, onChange, readonly, updateValueByEvent],
     )
 
-    useImperativeHandle(ref, () => {
+    useImperativeHandle(forwardedRef, () => {
       return {
         focus() {
           thumbRef.current?.focus()

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

@@ -1,4 +1,5 @@
-import './styles/index.css'
+// For bundled CSS (@tremolo-ui/react/styles/index.css)
+import './styles/global.css'
 import './components/Knob/index.css'
 import './components/NumberInput/index.css'
 import './components/Piano/index.css'
@@ -33,17 +34,18 @@ export {
   type StepperProps,
 } from './components/NumberInput'
 export {
+  Piano,
+  type PianoProps,
+  type PianoMethods,
+  getNoteRangeArray,
+  WhiteKey,
   BlackKey,
+  type KeyProps,
+  type KeyMethods,
   KeyLabel,
   type KeyLabelProps,
-  type KeyMethods,
-  type KeyProps,
-  type KeyboardShortcuts,
-  Piano,
-  type PianoProps,
   SHORTCUTS,
-  WhiteKey,
-  getNoteRangeArray,
+  type KeyboardShortcuts,
 } from './components/Piano'
 export {
   Scale,
@@ -76,12 +78,18 @@ export {
   type XYPadThumbMethods,
 } 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/{index.css → global.css}

@@ -1,5 +1,5 @@
 :root {
-  --tremolo-theme-color: #4e76e6;
+  --tremolo-theme-color: oklch(59.5% 0.17548 266.373);
 }
 
 .tremolo-no-select {