@tremolo-ui/react 0.4.0 → 0.5.0

package/src/components/Piano/context.tsx

@@ -1,73 +0,0 @@
-import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
-import { createStore, useStore } from 'zustand'
-
-export type NoteRange = {
-  first: number
-  last: number
-}
-
-type State = {
-  noteRange: NoteRange
-  glissando: boolean
-  midiMax: number
-  fill: boolean
-  onPlayNote: (noteNumber: number, velocity?: number) => void
-  onStopNote: (noteNumber: number) => void
-  label: (note: number, index: number) => ReactNode
-}
-
-type Action = {
-  notePosition: (note: number) => number
-}
-
-type PianoStore = ReturnType<typeof createPianoStore>
-
-const createPianoStore = (initProps: Partial<State> & Action) => {
-  // const noteRange = initProps.noteRange || { first: 0, last: 127 }
-  const DEFAULT_PROPS: State = {
-    noteRange: { first: 0, last: 127 },
-    glissando: true,
-    midiMax: 127,
-    fill: false,
-    label: () => undefined,
-    onPlayNote: () => {},
-    onStopNote: () => {},
-  }
-
-  return createStore<State & Action>()(() => ({
-    ...DEFAULT_PROPS,
-    ...initProps,
-    notePosition: initProps.notePosition,
-  }))
-}
-
-const PianoContext = createContext<PianoStore | null>(null)
-
-type PianoProviderProps = React.PropsWithChildren<Partial<State> & Action>
-
-export function PianoProvider({ children, ...props }: PianoProviderProps) {
-  const storeRef = useRef<PianoStore>(null)
-  if (!storeRef.current) {
-    storeRef.current = createPianoStore(props)
-  }
-
-  useEffect(() => {
-    if (storeRef.current) {
-      storeRef.current.setState(props)
-    } else {
-      storeRef.current = createPianoStore(props)
-    }
-  }, [props])
-
-  return (
-    <PianoContext.Provider value={storeRef.current}>
-      {children}
-    </PianoContext.Provider>
-  )
-}
-
-export function usePianoContext<T>(selector: (state: State & Action) => T): T {
-  const store = useContext(PianoContext)
-  if (!store) throw new Error('Missing PianoContext.Provider in the tree')
-  return useStore(store, selector)
-}

package/src/components/Piano/key.tsx

@@ -1,205 +0,0 @@
-import clsx from 'clsx'
-import React, {
-  CSSProperties,
-  ComponentPropsWithoutRef,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-  ReactElement,
-} from 'react'
-
-import { usePianoContext } from './context'
-import { KeyLabel, KeyLabelProps } from './KeyLabel'
-
-export interface KeyProps {
-  noteNumber: number
-
-  width?: number
-  height?: number | `${number}%`
-
-  bg?: string
-  color?: string
-  activeBg?: string
-  activeColor?: string
-
-  style?: CSSProperties
-
-  /**
-   * \<KeyLabel />
-   */
-  children?: ReactElement
-
-  /** @internal */
-  __width?: number
-}
-
-export interface KeyMethods {
-  play: (velocity?: number) => void
-  stop: () => void
-  played: () => boolean
-}
-
-type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
-type ImplProps = Props & { keyType: 'black' | 'white' }
-
-export const defaultWhiteKeyWidth = 40
-export const defaultBlackKeyWidth = 26
-
-const KeyImpl = forwardRef<KeyMethods, ImplProps>(
-  (
-    {
-      keyType,
-      noteNumber,
-      width,
-      height,
-      bg,
-      color,
-      activeBg,
-      activeColor,
-      className,
-      style,
-      children,
-      __width,
-      ...props
-    }: ImplProps,
-    ref,
-  ) => {
-    const [played, setPlayed] = useState(false)
-    const midiMax = usePianoContext((s) => s.midiMax)
-    const fill = usePianoContext((s) => s.fill)
-    // const glissando = usePianoContext(s => s.glissando)
-    const onPlayNote = usePianoContext((s) => s.onPlayNote)
-    const onStopNote = usePianoContext((s) => s.onStopNote)
-    const label = usePianoContext((s) => s.label)
-    const notePosition = usePianoContext((s) => s.notePosition)
-    const position = notePosition(noteNumber)
-
-    const disabled = noteNumber > midiMax
-    const colors = {
-      '--bg': bg,
-      '--color': color,
-      '--active-bg': activeBg,
-      '--active-color': activeColor,
-    }
-
-    useImperativeHandle(ref, () => {
-      return {
-        play(velocity) {
-          if (disabled) return
-          setPlayed(true)
-          if (onPlayNote) onPlayNote(noteNumber, velocity)
-        },
-        stop() {
-          setPlayed(false)
-          if (onStopNote) onStopNote(noteNumber)
-        },
-        played() {
-          return played
-        },
-      }
-    }, [disabled, noteNumber, onPlayNote, onStopNote, played])
-
-    let keyLabelProps: KeyLabelProps = {}
-    if (children != undefined) {
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child)) {
-          if (child.type == KeyLabel) {
-            keyLabelProps = child.props as KeyLabelProps
-          } else {
-            throw new Error('only <KeyLabel>')
-          }
-        } else {
-          throw new Error('children is an invalid element.')
-        }
-      })
-    }
-
-    return (
-      <div
-        className={clsx(`tremolo-piano-${keyType}-key`, className)}
-        aria-disabled={disabled}
-        data-active={played}
-        style={{
-          ...colors,
-          left: position,
-          width: fill ? __width : width,
-          height: height,
-          ...style,
-        }}
-        // onPointerDown={() => {
-        //   if (disabled) return
-        //   setPlayed(true)
-        //   if (onPlayNote) onPlayNote(noteNumber)
-        // }}
-        // onPointerEnter={() => {
-        //   if (disabled) return
-        //   if (glissando) {
-        //     setPlayed(true)
-        //     if (onPlayNote) onPlayNote(noteNumber)
-        //   }
-        // }}
-        // onPointerUp={() => {
-        //   if (disabled) return
-        //   setPlayed(false)
-        //   if (onStopNote) onStopNote(noteNumber)
-        // }}
-        // onPointerLeave={() => {
-        //   if (disabled) return
-        //   if (glissando) {
-        //     setPlayed(false)
-        //     if (onStopNote) onStopNote(noteNumber)
-        //   }
-        // }}
-        {...props}
-      >
-        <KeyLabel label={label} __note={noteNumber} {...keyLabelProps} />
-      </div>
-    )
-  },
-)
-
-export const WhiteKey = forwardRef<KeyMethods, Props>(
-  (
-    {
-      width = defaultWhiteKeyWidth,
-      height = '100%',
-      onContextMenu = (e) => e.preventDefault(),
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    return (
-      <KeyImpl
-        ref={ref}
-        keyType="white"
-        width={width}
-        height={height}
-        onContextMenu={onContextMenu}
-        {...props}
-      />
-    )
-  },
-)
-
-export const BlackKey = forwardRef<KeyMethods, Props>(
-  (
-    {
-      width = defaultBlackKeyWidth,
-      height = '60%',
-      onContextMenu = (e) => e.preventDefault(),
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    return (
-      <KeyImpl
-        ref={ref}
-        keyType="black"
-        width={width}
-        height={height}
-        onContextMenu={onContextMenu}
-        {...props}
-      />
-    )
-  },
-)

package/src/components/_util/type.ts

@@ -1 +0,0 @@
-export type Override<T, U> = T & Omit<U, keyof T>

package/src/hooks/useDragWithElement.ts

@@ -1,100 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
-
-import { createDrag } from '@tremolo-ui/dom'
-import { normalizeValue } from '@tremolo-ui/functions'
-
-import { useCallbackRef } from './useCallbackRef'
-
-interface UseDragWithElement<T extends Element> {
-  baseElementRef: RefObject<T | null>
-  /**
-   * Report the position on pointer down, before any movement.
-   *
-   * Enable it where the pointer position *is* the value, so that a plain click
-   * jumps to it. Leave it off where the element being dragged is an object in
-   * its own right, so that grabbing its edge does not shift it under the cursor.
-   *
-   * @default false
-   */
-  updateOnPointerDown?: boolean
-  /** CSS cursor to show while dragging. Applied to the element itself. */
-  cursor?: string
-  onDrag: (normalizedX: number, normalizedY: number) => void
-  onDragStart?: (normalizedX: number, normalizedY: number) => void
-  onDragEnd?: (normalizedX: number, normalizedY: number) => void
-}
-
-/**
- * Track a pointer drag, reporting the position normalized against
- * the bounding rect of `baseElementRef`.
- *
- * @returns a ref callback for the element that starts the drag, and whether a drag is in progress
- */
-export function useDragWithElement<T extends Element>({
-  baseElementRef,
-  updateOnPointerDown = false,
-  cursor,
-  onDrag,
-  onDragStart,
-  onDragEnd,
-}: UseDragWithElement<T>) {
-  const [dragging, setDragging] = useState(false)
-  const normalizedX = useRef(0)
-  const normalizedY = useRef(0)
-
-  const dragHandler = useCallbackRef(onDrag)
-  const dragStartHandler = useCallbackRef(onDragStart)
-  const dragEndHandler = useCallbackRef(onDragEnd)
-
-  const update = useCallback(
-    (clientX: number, clientY: number) => {
-      const base = baseElementRef.current
-      if (!base) return false
-      const { left, top, right, bottom } = base.getBoundingClientRect()
-      normalizedX.current = normalizeValue(clientX, left, right)
-      normalizedY.current = normalizeValue(clientY, top, bottom)
-      return true
-    },
-    [baseElementRef],
-  )
-
-  // See useDrag for why the node is held in state.
-  const [node, setNode] = useState<Element | null>(null)
-
-  useEffect(() => {
-    if (!node) return
-
-    const instance = createDrag(node, {
-      cursor,
-      onDragStart: ({ clientX, clientY }) => {
-        setDragging(true)
-        const updated = update(clientX, clientY)
-        if (updated && updateOnPointerDown) {
-          dragHandler(normalizedX.current, normalizedY.current)
-        }
-        dragStartHandler(normalizedX.current, normalizedY.current)
-      },
-      onDrag: ({ clientX, clientY }) => {
-        if (update(clientX, clientY)) {
-          dragHandler(normalizedX.current, normalizedY.current)
-        }
-      },
-      onDragEnd: () => {
-        setDragging(false)
-        dragEndHandler(normalizedX.current, normalizedY.current)
-      },
-    })
-
-    return () => instance.destroy()
-  }, [
-    node,
-    update,
-    updateOnPointerDown,
-    cursor,
-    dragHandler,
-    dragStartHandler,
-    dragEndHandler,
-  ])
-
-  return { refCallback: setNode, dragging }
-}

package/src/hooks/usePianoDrag.ts

@@ -1,75 +0,0 @@
-import { useRef, useCallback, RefObject } from 'react'
-
-import { normalizeValue } from '@tremolo-ui/functions'
-
-import { useEventListener } from './useEventListener'
-import { useRefCallbackEvent } from './useRefCallbackEvent'
-
-interface UsePianoDrag<T extends Element> {
-  baseElementRef: RefObject<T | null>
-  onDrag: (normalizedX: number, normalizedY: number) => void
-  onDragStart?: (normalizedX: number, normalizedY: number) => void
-  onDragEnd?: (normalizedX: number, normalizedY: number) => void
-}
-
-/**
- * Internal
- * @returns [refCallback, pointerDownHandler]
- * @private
- */
-export function usePianoDrag<T extends Element>({
-  baseElementRef,
-  onDrag,
-  onDragStart,
-  onDragEnd,
-}: UsePianoDrag<T>) {
-  const dragged = useRef(false)
-  const normalizedX = useRef(0)
-  const normalizedY = useRef(0)
-
-  const handleDrag = useCallback(
-    (event: MouseEvent | React.PointerEvent<T> | TouchEvent) => {
-      if (!baseElementRef.current || !dragged.current) {
-        return
-      }
-      const isTouch = event instanceof TouchEvent
-      if (isTouch && event.cancelable) event.preventDefault()
-      const { left, top, right, bottom } =
-        baseElementRef.current.getBoundingClientRect()
-      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
-      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
-      const nx = normalizeValue(mouseX, left, right)
-      const ny = normalizeValue(mouseY, top, bottom)
-      normalizedX.current = nx
-      normalizedY.current = ny
-      onDrag(nx, ny)
-    },
-    [onDrag, baseElementRef],
-  )
-
-  const refHandler = useRefCallbackEvent(
-    'touchmove',
-    handleDrag,
-    { passive: false },
-    [onDrag],
-  )
-
-  const pointerDownHandler = useCallback(
-    (event: React.PointerEvent<T>) => {
-      dragged.current = true
-      handleDrag(event)
-      onDragStart?.(normalizedX.current, normalizedY.current)
-    },
-    [handleDrag, onDragStart],
-  )
-
-  useEventListener(globalThis.window, 'pointermove', handleDrag)
-
-  useEventListener(globalThis.window, 'pointerup', () => {
-    if (!dragged.current) return
-    dragged.current = false
-    onDragEnd?.(normalizedX.current, normalizedY.current)
-  })
-
-  return { refHandler, pointerDownHandler }
-}

package/src/hooks/useRefCallbackEvent.ts

@@ -1,34 +0,0 @@
-import { useMemo } from 'react'
-
-/**
- * Internal
- * @private
- */
-export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
-  event: K,
-  handler: (event: DocumentEventMap[K]) => void,
-  options?: boolean | AddEventListenerOptions,
-  deps?: React.DependencyList,
-): (div: EventTarget | null) => void
-export function useRefCallbackEvent(
-  event: string,
-  handler: (event: Event) => void,
-  options?: boolean | AddEventListenerOptions,
-  deps: React.DependencyList = [],
-): (div: EventTarget | null) => void {
-  return useMemo(() => {
-    let cleanup: (() => void) | undefined
-    return (node: EventTarget | null) => {
-      if (!node) {
-        cleanup?.()
-        return
-      }
-      node.addEventListener(event, handler, options)
-
-      cleanup = () => {
-        node.removeEventListener(event, handler, options)
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps)
-}