@tremolo-ui/react 0.3.0 → 0.5.0

package/src/components/NumberInput/InternalInput.tsx

@@ -1,221 +0,0 @@
-import clsx from 'clsx'
-import {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {
-  clamp,
-  InputEventOption,
-  normalizeValue,
-  rawValue,
-  stepValue,
-} from '@tremolo-ui/functions'
-
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-
-import { safeClamp, useNumberInputContext } from './context'
-import { parseValue } from './type'
-
-import { NumberInputMethods } from '.'
-
-interface InternalProps {
-  disabled: boolean
-  readonly: boolean
-  wheel: InputEventOption | null
-  keyboard: InputEventOption | null
-
-  selectWithFocus?: 'all' | 'number' | 'none'
-  blurOnEnter?: boolean
-  keepWithinRange?: boolean
-  clampValueOnBlur?: boolean
-
-  onChange?: (value: number, text: string) => void
-  onFocus?: (
-    value: number,
-    text: string,
-    event: React.FocusEvent<HTMLInputElement, Element>,
-  ) => void
-  onBlur?: (
-    value: number,
-    text: string,
-    event: React.FocusEvent<HTMLInputElement, Element>,
-  ) => void
-}
-
-type InternalPropsWithAttributes = InternalProps &
-  Omit<ComponentPropsWithoutRef<'input'>, keyof InternalProps>
-
-export const InternalInput = forwardRef<
-  NumberInputMethods,
-  InternalPropsWithAttributes
->(
-  (
-    {
-      disabled,
-      readonly,
-      selectWithFocus,
-      blurOnEnter,
-      clampValueOnBlur,
-      wheel,
-      keyboard,
-      className,
-      onChange,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      children: _children,
-      ...props
-    }: InternalPropsWithAttributes,
-    ref,
-  ) => {
-    const elmRef = useRef<HTMLInputElement>(null)
-    const [editing, setEditing] = useState(false)
-    const value = useNumberInputContext((s) => s.value)
-    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
-    const min = useNumberInputContext((s) => s.min)
-    const max = useNumberInputContext((s) => s.max)
-    const step = useNumberInputContext((s) => s.step)
-    const units = useNumberInputContext((s) => s.units)
-    const digit = useNumberInputContext((s) => s.digit)
-    const change = useNumberInputContext((s) => s.change)
-
-    const error = useMemo(() => {
-      if (editing) return false
-      const v = valueAsNumber
-      return (min ?? -Infinity) > v || v > (max ?? Infinity)
-    }, [editing, max, min, valueAsNumber])
-
-    const updateValueByEvent = useCallback(
-      (eventType: InputEventOption[0], x: number) => {
-        let newValue
-        if (eventType == 'normalized') {
-          if (!min || !max) {
-            throw new Error(
-              '[NumberInput] "min" and "max" are required when InputEventOption[0] is set to "normalized".',
-            )
-          }
-          const n = normalizeValue(valueAsNumber, min, max)
-          newValue = rawValue(n + x, min, max)
-          return clamp(stepValue(newValue, step), min, max)
-        } else {
-          newValue = valueAsNumber + x
-          return stepValue(newValue, step)
-        }
-      },
-      [max, min, step, valueAsNumber],
-    )
-
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (!keyboard || !onChange || readonly) return
-        const key = event.key
-        if (!['ArrowUp', 'ArrowDown'].includes(key)) return
-        event.preventDefault()
-        const x = key == 'ArrowUp' ? keyboard[1] : -keyboard[1]
-        const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)))
-        // console.log('key control')
-        onChange?.(parsed.rawValue, parsed.formatValue)
-      },
-      [keyboard, readonly, onChange, updateValueByEvent],
-    )
-
-    const wheelRefCallback = useRefCallbackEvent(
-      'wheel',
-      (event) => {
-        if (!wheel || readonly) return
-        event.preventDefault()
-        if (!onChange || event.deltaY == 0) return
-        const x = Math.sign(event.deltaY) * -wheel[1]
-        const parsed = parseValue(String(updateValueByEvent(wheel[0], x)))
-        // console.log('wheel control')
-        onChange?.(parsed.rawValue, parsed.formatValue)
-      },
-      { passive: false },
-      [wheel, readonly, onChange, updateValueByEvent],
-    )
-
-    useImperativeHandle(ref, () => {
-      return {
-        focus() {
-          elmRef.current?.focus()
-        },
-        blur() {
-          elmRef.current?.blur()
-        },
-      }
-    }, [])
-
-    return (
-      <input
-        ref={(input) => {
-          elmRef.current = input
-          wheelRefCallback(input)
-        }}
-        className={clsx('tremolo-number-input', className)}
-        value={value}
-        min={min}
-        max={max}
-        step={step}
-        type="text"
-        aria-disabled={disabled}
-        aria-readonly={readonly}
-        tabIndex={-1}
-        data-error={error}
-        onChange={(event) => {
-          if (readonly) return
-          const v = event.currentTarget.value
-          const cursorPos = event.target.selectionStart
-          change(v)
-          const valueAsNumber = parseValue(v, units, digit).rawValue
-          onChange?.(valueAsNumber, v)
-          if (cursorPos) {
-            event.target.selectionStart = cursorPos
-            event.target.selectionEnd = cursorPos
-          }
-        }}
-        onFocus={(event) => {
-          setEditing(true)
-          const v = event.currentTarget.value
-          const parsed = parseValue(v, units, digit)
-          if (selectWithFocus == 'all') {
-            event.currentTarget.setSelectionRange(0, v.length)
-          } else if (selectWithFocus == 'number') {
-            event.currentTarget.setSelectionRange(
-              0,
-              parsed.formatValue.length - parsed.unit.length,
-            )
-          }
-          onFocus?.(parsed.rawValue, parsed.formatValue, event)
-        }}
-        onBlur={(event) => {
-          setEditing(false)
-          // update value
-          let v = parseValue(event.currentTarget.value, units, digit).rawValue
-          if (clampValueOnBlur) {
-            v = safeClamp(v, min, max)
-          }
-          const parsed = parseValue(String(v), units, digit)
-          change(parsed.formatValue)
-          if (clampValueOnBlur) {
-            onChange?.(parsed.rawValue, parsed.formatValue)
-          }
-          onBlur?.(parsed.rawValue, parsed.formatValue, event)
-        }}
-        onKeyDown={(event) => {
-          if (blurOnEnter && event.key == 'Enter') {
-            event.currentTarget.blur()
-          }
-          handleKeyDown(event)
-          onKeyDown?.(event)
-        }}
-        {...props}
-      />
-    )
-  },
-)

package/src/components/NumberInput/type.ts

@@ -1,58 +0,0 @@
-/**
- * [unit, scale][]
- * @example
- * [['Hz', 1], ['kHz', 1000]]
- */
-export type Units = [string, number][]
-
-export function selectUnit(units: Units, value: number): [string, number] {
-  let i = 0
-  for (; i < units.length; i++) {
-    if (Math.abs(units[i][1]) > Math.abs(value)) break
-  }
-  return units[Math.max(0, i - 1)]
-}
-
-export function parseValue(
-  inputString: string,
-  units?: string | Units,
-  digit?: number,
-): {
-  rawValue: number
-  formatValue: string
-  unit: string
-} {
-  const str = inputString.trim()
-  if (!units || typeof units == 'string') {
-    const m = str.match(/-?\d+(\.\d+)?/)
-    let v = Number(m?.[0] ?? '0')
-    v = isNaN(v) ? 0 : v
-    return {
-      rawValue: v,
-      formatValue: (digit != undefined ? v.toFixed(digit) : v) + (units ?? ''),
-      unit: units ?? '',
-    }
-  }
-
-  const unitList = units.map(([u, _s]) => u)
-  const scaleList = units.map(([_u, s]) => s)
-  let rawValue = 0
-  let unit = unitList[0]
-  let formatValue =
-    (digit != undefined ? rawValue.toFixed(digit) : rawValue) + unit
-  const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/)
-  if (m) {
-    rawValue = Number(m[1]) || 0
-    const uIndex = unitList.indexOf(m[3])
-    rawValue *= uIndex != -1 ? scaleList[uIndex] : 1
-    const [u, scale] = selectUnit(units, rawValue)
-    const v = rawValue / scale
-    formatValue = (digit != undefined ? v.toFixed(digit) : v) + u
-    unit = u
-  }
-  return {
-    rawValue: rawValue,
-    formatValue: formatValue,
-    unit: unit,
-  }
-}

package/src/components/Piano/KeyLabel.tsx

@@ -1,51 +0,0 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
-
-import { usePianoContext } from './context'
-
-import { getNoteRangeArray } from '.'
-
-export interface KeyLabelProps {
-  /**
-   * override Piano.label
-   */
-  label?: (note: number, index: number) => ReactNode
-
-  wrapperClassName?: string
-  wrapperStyle?: CSSProperties
-
-  /** @internal */
-  __note?: number
-  /** @internal */
-  __label?: (note: number, index: number) => ReactNode
-}
-
-export function KeyLabel({
-  label,
-  className,
-  wrapperClassName,
-  wrapperStyle,
-  __note,
-  __label,
-  ...props
-}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>) {
-  const noteRange = usePianoContext((s) => s.noteRange)
-  const noteRangeArray = getNoteRangeArray(noteRange)
-  const index = noteRangeArray.indexOf(__note!)
-  const content = label
-    ? label(__note!, index)
-    : __label && __label(__note!, index)
-
-  return (
-    (content != undefined || content != null) && (
-      <div
-        className={clsx('tremolo-piano-key-label-wrapper', wrapperClassName)}
-        style={wrapperStyle}
-      >
-        <div className={clsx('tremolo-piano-key-label', className)} {...props}>
-          {content}
-        </div>
-      </div>
-    )
-  )
-}

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/WheelObserver/index.tsx

@@ -1,48 +0,0 @@
-import { ComponentProps, ElementType, ReactNode } from 'react'
-
-import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
-import { composeRefs } from '../_util/composeRefs'
-import { Override } from '../_util/type'
-
-export interface WheelObserverProps<T extends ElementType> {
-  /**
-   * React.ElementType
-   * @default div
-   */
-  as?: T
-
-  children?: ReactNode
-  onWheel?: (event: WheelEvent) => void
-}
-
-/**
- * @example
- * <WheelObserver
- *   onWheel={(event) => {
- *     event.preventDefault()
- *     console.log(event.deltaY)
- *   }
- * >
- *   <div>Wheel here</div>
- * </WheelObserver>
- */
-export function WheelObserver<T extends ElementType = 'div'>(
-  props: Override<WheelObserverProps<T>, ComponentProps<T>>,
-) {
-  const { as: Component = 'div', children, onWheel, ref, ...attributes } = props
-
-  const wheelRefCallback = useRefCallbackEvent(
-    'wheel',
-    (event) => {
-      if (onWheel) onWheel(event)
-    },
-    { passive: false },
-    [onWheel],
-  )
-
-  return (
-    <Component ref={composeRefs(ref, wheelRefCallback)} {...attributes}>
-      {children}
-    </Component>
-  )
-}

package/src/components/_util/type.ts

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