zds-pickers 4.1.1 → 4.1.4

package/lib/hooks/useComponentSize.ts

@@ -1,52 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from 'react'
-
-const getSize = (el: HTMLDivElement | null) =>
-  el
-    ? {
-        width: el.offsetWidth,
-        height: el.offsetHeight,
-      }
-    : {
-        width: 0,
-        height: 0,
-      }
-
-const useComponentSize = (ref: React.RefObject<HTMLDivElement>) => {
-  const [componentSize, setComponentSize] = useState(
-    getSize(ref ? ref.current : null),
-  )
-
-  const handleResize = useCallback(() => {
-    if (ref.current) {
-      setComponentSize(getSize(ref.current))
-    }
-  }, [ref])
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useLayoutEffect(() => {
-    if (!ref.current) return
-
-    handleResize()
-
-    if (typeof ResizeObserver === 'function') {
-      const resizeObserver = new ResizeObserver(() => {
-        handleResize()
-      })
-      resizeObserver.observe(ref.current)
-
-      return () => {
-        resizeObserver.disconnect()
-        // resizeObserver = null
-      }
-    }
-    window.addEventListener('resize', handleResize)
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [ref.current])
-
-  return componentSize
-}
-
-export default useComponentSize

package/lib/hooks/useStateWithDynamicDefault.ts

@@ -1,13 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const useStateWithDynamicDefault = <T>(defaultVal: T) => {
-  const [state, setState] = useState<T>(defaultVal)
-
-  useEffect(() => {
-    setState(defaultVal)
-  }, [defaultVal])
-
-  return [state, setState] as const
-}
-
-export default useStateWithDynamicDefault

package/lib/index.ts

@@ -1,52 +0,0 @@
-export * from './utils'
-
-export * from './midi/ccValues'
-export * from './midi/export'
-
-export * from './other/DefaultTooltip'
-export * from './other/OctavePlayer'
-export * from './other/SvgText'
-
-export * from './pickers/CCPicker'
-export * from './pickers/ChannelMappingPicker'
-export * from './pickers/ChannelPicker'
-export * from './pickers/KeyPicker'
-export * from './pickers/Knob'
-export * from './pickers/KnobPicker'
-export * from './pickers/LatchPicker'
-export * from './pickers/MappingPicker'
-export * from './pickers/NotePicker'
-export * from './pickers/PianoPicker'
-export * from './pickers/PolarityPicker'
-export * from './pickers/ResponseCurve'
-export * from './pickers/ResponseCurvePicker'
-export * from './pickers/Select'
-export * from './pickers/StatusPicker'
-export * from './pickers/ValuePicker'
-
-// Types
-export type * from './midi/export'
-
-export type * from './other/DefaultTooltip'
-export type * from './other/OctavePlayer'
-export type * from './other/SoundFontProvider'
-export type * from './other/SvgText'
-
-export type * from './pickers/CCPicker'
-export type * from './pickers/ChannelMappingPicker'
-export type * from './pickers/ChannelPicker'
-export type * from './pickers/KeyPicker'
-export type * from './pickers/Knob'
-export type * from './pickers/KnobPicker'
-export type * from './pickers/LatchPicker'
-export type * from './pickers/MappingPicker'
-export type * from './pickers/NotePicker'
-export type * from './pickers/PianoPicker'
-export type * from './pickers/PolarityPicker'
-export type * from './pickers/ResponseCurve'
-export type * from './pickers/ResponseCurvePicker'
-export type * from './pickers/Select'
-export type * from './pickers/StatusPicker'
-export type * from './pickers/ValuePicker'
-
-export type * from './rotaryKnob/InternalInput'

package/lib/midi/ccValues.ts

@@ -1,139 +0,0 @@
-import type { Option } from '../pickers/Select'
-
-const changeControllerOptions = [
-  'Bank Select',
-  'Modulation Wheel',
-  'Breath Controller',
-  '',
-  'Foot Control',
-  'Portamento Time',
-  'Data Entry Slider',
-  'Volume',
-  'Balance',
-  '',
-  'Pan',
-  'Expression',
-  'Effect Control 1',
-  'Effect Control 2',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  'Controller 0',
-  'Controller 1',
-  'Controller 2',
-  'Controller 3',
-  'Controller 4',
-  'Controller 5',
-  'Controller 6',
-  'Controller 7',
-  'Controller 8',
-  'Controller 9',
-  'Controller 10',
-  'Controller 11',
-  'Controller 12',
-  'Controller 13',
-  'Controller 14',
-  'Controller 15',
-  'Controller 16',
-  'Controller 17',
-  'Controller 18',
-  'Controller 19',
-  'Controller 20',
-  'Controller 21',
-  'Controller 22',
-  'Controller 23',
-  'Controller 24',
-  'Controller 25',
-  'Controller 26',
-  'Controller 27',
-  'Controller 28',
-  'Controller 29',
-  'Controller 30',
-  'Controller 31',
-  'Sustain',
-  'Portamento',
-  'Sostenuto',
-  'Soft Pedal',
-  'Legato Pedal',
-  'Sustain 2',
-  'Sound Variation',
-  'Resonance/Timbre',
-  'Sound Release Time',
-  'Sound Attack Time',
-  'Frequency Cutoff',
-  'Sound Control 6',
-  'Sound Control 7',
-  'Sound Control 8',
-  'Sound Control 9',
-  'Sound Control 10',
-  'Decay or General 1',
-  'Hi-Pass or General 2',
-  'General 3',
-  'General 4',
-  'Portamento Amount',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  'Reverb Level',
-  'Tremolo Depth',
-  'Chorus Level',
-  'Detune',
-  'Phaser Depth',
-  'Data Entry +1',
-  'Data Entry -1',
-  'Non-registered LSB',
-  'Non-registered MSB',
-  'Registered msb',
-  'Registered lsb',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  '',
-  'Shift 1',
-  'Shift 2',
-  'Shift 3',
-  'Shift 4',
-  'Shift 5',
-  'Shift 6',
-  '',
-  '',
-  '',
-  '',
-  'All Sound Off',
-  'All Controllers Off',
-  'Local Mode',
-  'All Notes Off',
-  'Omni Mode Off',
-  'Omni Mode On',
-  'Mono Mode On',
-  'Poly Mode',
-].map(
-  (label, value): Option<number> => ({
-    label: String(label).length ? `${value} - ${label}` : String(value),
-    value,
-  }),
-)
-
-export { changeControllerOptions }

package/lib/midi/export.ts

@@ -1,88 +0,0 @@
-import type { Option, noSelection } from 'lib/pickers/Select'
-
-const Statuses = {
-  noteOff: 8, // 1000
-  noteOn: 9, // 1001
-  aftertouch: 10, // 1010
-  controlChange: 11, // 1011
-  programChange: 12, // 1100
-  channelPressure: 13, // 1101
-  pitchWheel: 14, // 1110
-} as const
-
-// Define type as union of literal values
-type Status = 8 | 9 | 10 | 11 | 12 | 13 | 14
-
-const MASK_CHANNEL = 15 // 00001111
-const MASK_STATUS = 240 // 01110000
-
-const statusOptions: Option<Status>[] = [
-  { value: Statuses.noteOn, label: 'Note On' },
-  { value: Statuses.noteOff, label: 'Note Stack' },
-  { value: Statuses.controlChange, label: 'Control Change' },
-  { value: Statuses.programChange, label: 'Program Change' },
-  { value: Statuses.aftertouch, label: 'Aftertouch' },
-  { value: Statuses.channelPressure, label: 'Channel Pressure' },
-  { value: Statuses.pitchWheel, label: 'Pitch Wheel' },
-]
-
-const getStatusLabel = (val: Status) =>
-  statusOptions.filter(({ value }) => value === val)[0]?.label || '???'
-
-const combineStatusWithChannel = (channel: number, status: Status) =>
-  channel | (status << 4)
-
-const extractStatusAndChannel = (
-  status: number,
-): {
-  status: Status
-  channel: number
-} => ({
-  status: (((status & MASK_STATUS) >> 4) | 8) as Status,
-  channel: status & MASK_CHANNEL,
-})
-
-const RESPONSE_CURVE_0 = 0
-const RESPONSE_CURVE_1 = 1
-const RESPONSE_CURVE_2 = 2
-const RESPONSE_CURVE_3 = 3
-const RESPONSE_CURVE_4 = 4
-const RESPONSE_CURVE_5 = 5
-const RESPONSE_CURVE_6 = 6
-const RESPONSE_CURVE_7 = 7
-
-const ResponseCurveLabels = {
-  [RESPONSE_CURVE_0]: 'Linear, no change',
-  [RESPONSE_CURVE_1]: 'A little less sensitive',
-  [RESPONSE_CURVE_2]: 'Even less sensitive',
-  [RESPONSE_CURVE_3]: 'Least sensitive',
-  [RESPONSE_CURVE_4]: 'A little sensitive',
-  [RESPONSE_CURVE_5]: 'Moderately sensitive',
-  [RESPONSE_CURVE_6]: 'Most sensitive',
-  [RESPONSE_CURVE_7]: 'Always maxed out',
-} as const
-
-// type Curve = (typeof Items)[keyof typeof Items]
-
-type Curve = keyof typeof ResponseCurveLabels | typeof noSelection
-
-const responseCurves: Option<Curve>[] = Object.keys(ResponseCurveLabels)
-  .map(Number)
-  .map(key => ({
-    value: key as Curve,
-    label: ResponseCurveLabels[key as keyof typeof ResponseCurveLabels],
-  }))
-
-export {
-  combineStatusWithChannel,
-  extractStatusAndChannel,
-  getStatusLabel,
-  MASK_CHANNEL,
-  MASK_STATUS,
-  responseCurves,
-  ResponseCurveLabels,
-  Statuses,
-  statusOptions,
-}
-
-export type { Curve, Status }

package/lib/other/DefaultTooltip.ts

@@ -1,14 +0,0 @@
-import { Fragment, createElement } from 'react'
-
-type TooltipProps = {
-  children?: React.ReactNode
-  placement?: 'left' | 'right' | 'top' | 'bottom'
-  title: React.ReactNode
-}
-
-const DefaultTooltip = ({ children }: React.PropsWithoutRef<TooltipProps>) =>
-  createElement(Fragment, null, children)
-
-export { DefaultTooltip }
-
-export type { TooltipProps }

package/lib/other/OctavePlayer.tsx

@@ -1,139 +0,0 @@
-import type { PianoProps } from 'lib/pickers/PianoPicker'
-import type Soundfont from 'soundfont-player'
-import { /* Midi, */ Note } from 'tonal'
-import { Piano as ReactPiano } from 'zds-react-piano'
-import type { TooltipProps } from './DefaultTooltip'
-import { SoundfontProvider } from './SoundFontProvider'
-
-type PianoMidiNote = {
-  accidental: boolean
-  left: number
-  midiNumber: number
-  width: number
-}
-
-const baseNotes = [
-  'C',
-  'C#',
-  'D',
-  'D#',
-  'E',
-  'F',
-  'F#',
-  'G',
-  'G#',
-  'A',
-  'A#',
-  'B',
-]
-
-// const { midiToFreq, midiToNoteName } = Midi
-
-// console.log(Note.names(), Note.midi('C4'))
-
-// const firstNote = 21
-// const lastNote = 108
-const numNotes = 12
-
-const whiteNotes = numNotes * 0.7 // approx
-
-const audioContext = new window.AudioContext()
-
-type OctavePlayerProps = PianoProps & {
-  disabled?: boolean
-  height: number
-  octave: number
-  width: number
-}
-
-const BaseOctavePlayer = ({
-  octave,
-  height,
-  width,
-  ...rest
-}: OctavePlayerProps) => {
-  const keyWidth = width / whiteNotes + 2
-  const keyWidthToHeight = keyWidth / height
-
-  const firstNote = Note.midi(baseNotes[0] + String(octave)) || 0
-  const lastNote =
-    Note.midi(baseNotes[baseNotes.length - 1] + String(octave)) || 0
-
-  return (
-    <div>
-      <ReactPiano
-        keyWidthToHeight={keyWidthToHeight}
-        noteRange={{ first: firstNote, last: lastNote }}
-        width={width}
-        {...rest}
-      />
-    </div>
-  )
-}
-
-type WithProviderProps = PianoProps & {
-  format?: 'mp3' | 'ogg'
-  height: number
-  hostname?: string
-  instrumentName?: Soundfont.InstrumentName
-  octave?: number
-  onChange?: (note: number) => void
-  onClick?: (note: number) => void
-  onDoubleClick?: (note: number) => void
-  onKeyMouseEnter?: (note: PianoMidiNote) => void
-  onKeyMouseLeave?: (note: number) => void
-  selectedNotes?: number[]
-  soundfont?: 'MusyngKite' | 'FluidR3_GM'
-  Tooltip?: TooltipProps
-  width: number
-}
-
-const WithProvider = ({
-  format,
-  height,
-  hostname,
-  instrumentName,
-  octave = 4,
-  onChange,
-  onClick,
-  onDoubleClick,
-  onKeyMouseEnter,
-  onKeyMouseLeave,
-  selectedNotes,
-  soundfont,
-  Tooltip,
-  width,
-}: WithProviderProps) => (
-  <SoundfontProvider
-    {...{
-      audioContext,
-      format,
-      hostname,
-      instrumentName,
-      onChange,
-      soundfont,
-    }}
-    render={({ isLoading, playNote, stopNote }) => (
-      <BaseOctavePlayer
-        disabled={isLoading}
-        {...{
-          height,
-          octave,
-          onClick,
-          onDoubleClick,
-          onKeyMouseEnter,
-          onKeyMouseLeave,
-          playNote,
-          selectedNotes,
-          stopNote,
-          Tooltip,
-          width,
-        }}
-      />
-    )}
-  />
-)
-
-export { WithProvider as OctavePlayer }
-
-export type { OctavePlayerProps, PianoMidiNote, WithProviderProps }