zds-pickers 4.1.1 → 4.1.3

package/lib/pickers/KeyPicker.tsx

@@ -1,55 +0,0 @@
-import { useCallback } from 'react'
-import { OctavePlayer, type OctavePlayerProps } from '../other/OctavePlayer'
-import { noSelection } from './Select'
-
-type KeyPickerProps = Omit<OctavePlayerProps, 'selectedNotes' | 'onClick'> & {
-  value: number
-  onChange: (value: number) => void
-  disabled?: boolean
-  height?: number
-  width?: number
-  octave?: number
-}
-
-const KeyPicker = (props: KeyPickerProps) => {
-  const {
-    value,
-    onChange,
-    disabled = false,
-    height = 100,
-    width = 300,
-    octave = 4,
-    ...rest
-  } = props
-
-  const handleKeyClick = useCallback(
-    (note: number) => {
-      if (disabled) return
-      onChange(note)
-    },
-    [disabled, onChange],
-  )
-
-  // Only highlight the note if it's a valid selection and within the octave range
-  // Octave 4 = C4 (60) to B4 (71)
-  const octaveStart = 60 + (octave - 4) * 12
-  const octaveEnd = octaveStart + 11
-  const shouldHighlight =
-    value !== noSelection && value >= octaveStart && value <= octaveEnd
-
-  return (
-    <OctavePlayer
-      {...rest}
-      selectedNotes={shouldHighlight ? [value] : []}
-      disabled={disabled}
-      height={height}
-      width={width}
-      octave={octave}
-      onClick={handleKeyClick}
-      instrumentName="acoustic_grand_piano"
-    />
-  )
-}
-
-export { KeyPicker }
-export type { KeyPickerProps }

package/lib/pickers/Knob.tsx

@@ -1,93 +0,0 @@
-import { useCallback } from 'react'
-import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
-import { RotaryKnob } from '../rotaryKnob'
-import { assertRange } from '../utils'
-import { knobSkin10 } from './knobSkin10'
-
-type KnobProps = {
-  disabled?: boolean
-  max?: number
-  min?: number
-  onChange?: (value: number) => void
-  value?: number
-  wheelEnabled?: boolean
-  wheelSensitivity?: number
-}
-
-const Knob = (props: KnobProps) => {
-  const {
-    disabled = false,
-    max = 127,
-    min = 0,
-    onChange,
-    value: initialValue = 0,
-    wheelEnabled = false,
-    wheelSensitivity = 0.1,
-    ...rest
-  } = props
-
-  const [value, setValue] = useStateWithDynamicDefault(initialValue)
-
-  const handleChange = (val: number) => {
-    if (disabled) return
-
-    const newValue = assertRange(Number.parseInt(String(val), 10), max, min)
-    setValue(newValue)
-    if (onChange) {
-      onChange(newValue)
-    }
-  }
-
-  const handleWheel = useCallback(
-    (event: React.WheelEvent<HTMLDivElement>) => {
-      if (!wheelEnabled || disabled) return
-
-      event.preventDefault()
-      const delta = -event.deltaY * wheelSensitivity
-      const newValue = assertRange(value + delta, max, min)
-
-      setValue(newValue)
-      if (onChange) {
-        onChange(newValue)
-      }
-    },
-    [
-      wheelEnabled,
-      disabled,
-      wheelSensitivity,
-      value,
-      max,
-      min,
-      onChange,
-      setValue,
-    ],
-  )
-
-  return (
-    <RotaryKnob
-      clampMax={320}
-      clampMin={40}
-      className="zds-pickers__knob-container"
-      disabled={disabled}
-      onChange={handleChange}
-      onWheel={wheelEnabled ? handleWheel : undefined}
-      preciseMode={false}
-      rotateDegrees={180}
-      /**
-       * To see all skins:
-       * http://react-rotary-knob-skins-preview.surge.sh/
-       *
-       * NOTE: we've copied the one we use into this package because the skins
-       * pack package does not work in Electron.
-       */
-      skin={knobSkin10}
-      style={{ opacity: disabled ? 0.4 : 1 }}
-      unlockDistance={0}
-      {...{ defaultValue: value, max, min, value, ...rest }}
-    />
-  )
-}
-
-export { Knob }
-
-export type { KnobProps }

package/lib/pickers/KnobPicker.tsx

@@ -1,93 +0,0 @@
-import { forwardRef, useMemo } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { arraySequence } from '../utils'
-import { Knob } from './Knob'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type KnobPickerProps = SelectProps<number> & {
-  highToLow?: boolean
-  includeLabel?: boolean
-  includePicker?: boolean
-  knobProps?: Partial<KnobPickerProps>
-  max?: number
-  min?: number
-  wheelEnabled?: boolean
-  wheelSensitivity?: number
-  value: number
-}
-
-type KnobPickerRef = SelectInstance<
-  Option<number>,
-  false,
-  GroupBase<Option<number>>
->
-
-const KnobPicker = forwardRef<
-  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
-  KnobPickerProps
->((props, ref) => {
-  const {
-    disabled,
-    highToLow,
-    includeLabel,
-    includePicker,
-    knobProps,
-    label,
-    max = 127,
-    min = 0,
-    onChange,
-    shrinkLabel,
-    value = 0,
-    wheelEnabled,
-    wheelSensitivity = 0.1,
-    ...rest
-  } = props
-
-  const options = useMemo(() => {
-    const result = arraySequence(max - min + 1)
-      .map(i => min + i)
-      .map((i): Option<number> => ({ value: i, label: String(i) }))
-    return highToLow ? result.reverse() : result
-  }, [highToLow, max, min])
-
-  return (
-    <div className="zds-pickers__container">
-      {Boolean(!shrinkLabel && Boolean(label)) && (
-        <span className="zds-pickers__label">{label}</span>
-      )}
-      <div style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
-        {Boolean(includePicker) && (
-          <Select
-            {...{
-              ...rest,
-              disabled,
-              isDisabled: disabled,
-              onChange,
-              options,
-              ref,
-              value,
-            }}
-          />
-        )}
-
-        <Knob
-          {...{
-            disabled,
-            max,
-            min,
-            onChange,
-            value,
-            wheelEnabled,
-            wheelSensitivity,
-            ...knobProps,
-          }}
-        />
-      </div>
-    </div>
-  )
-})
-
-export { KnobPicker }
-
-export type { KnobPickerProps, KnobPickerRef }

package/lib/pickers/LatchPicker.tsx

@@ -1,33 +0,0 @@
-import { forwardRef } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import type { Polarity } from './PolarityPicker'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-const options: Option<Polarity>[] = [
-  { value: 0, label: 'Momentary' },
-  { value: 1, label: 'Latching' },
-]
-
-type LatchPickerProps = Omit<SelectProps<Polarity>, 'options'>
-
-type LatchPickerRef = SelectInstance<
-  Option<Polarity>,
-  false,
-  GroupBase<Option<Polarity>>
->
-
-const LatchPicker = forwardRef<
-  SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>,
-  LatchPickerProps
->((props, ref) => (
-  <Select
-    {...props}
-    options={options}
-    ref={ref}
-  />
-))
-
-export { LatchPicker }
-
-export type { LatchPickerProps, LatchPickerRef }

package/lib/pickers/MappingPicker.tsx

@@ -1,68 +0,0 @@
-import { forwardRef, useMemo } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { getStockNames, getUserMappingNames } from 'zds-mappings'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type MappingPickerProps = Omit<SelectProps<string>, 'options'> & {
-  allowClearing: boolean
-}
-
-type MappingPickerRef = SelectInstance<
-  Option<string>,
-  false,
-  GroupBase<Option<string>>
->
-
-const MappingPicker = forwardRef<
-  SelectInstance<Option<string>, false, GroupBase<Option<string>>>,
-  MappingPickerProps
->(({ allowClearing, ...rest }, ref) => {
-  const stockMappings = getStockNames()
-  const userMappings = getUserMappingNames()
-
-  const options = useMemo(() => {
-    const result = allowClearing
-      ? [
-          {
-            value: 'No Mapping',
-            label: (
-              <span className="zds-mappings-clear-mapping">No Mapping</span>
-            ),
-          },
-        ]
-      : []
-
-    return [
-      ...result,
-
-      {
-        label: allowClearing ? <hr /> : '',
-        options: userMappings.map(label => ({
-          value: label,
-          label: <span className="zds-mappings-user-mapping">{label}</span>,
-        })),
-      },
-
-      {
-        label: userMappings.length ? <hr /> : allowClearing ? <hr /> : '',
-        options: stockMappings.map(label => ({
-          label,
-          value: label,
-        })),
-      },
-    ] as Option<string>[]
-  }, [allowClearing, stockMappings, userMappings])
-
-  return (
-    <Select
-      {...rest}
-      options={options}
-      ref={ref}
-    />
-  )
-})
-
-export { MappingPicker }
-
-export type { MappingPickerProps, MappingPickerRef }

package/lib/pickers/NotePicker.tsx

@@ -1,95 +0,0 @@
-import { forwardRef, useCallback, useMemo } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { Midi } from 'tonal'
-import { type MapItem, type Mapping, emptyMapping } from 'zds-mappings'
-import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
-import { assertRange } from '../utils'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-const { midiToNoteName } = Midi
-
-const formattedMapEntry = ({ note, name }: MapItem) =>
-  `${note} ${name.length ? '-' : ''} ${name}`
-const formattedListEntry = (label: string, idx: number) => ({
-  label,
-  value: idx + 1,
-})
-
-type NotePickerProps = Omit<SelectProps<number>, 'options'> & {
-  channel: number
-  disabled?: boolean
-  isMelodicMode?: boolean
-  mapping?: Mapping
-  onChange: (value: number) => void
-}
-
-type NotePickerRef = SelectInstance<
-  Option<number>,
-  false,
-  GroupBase<Option<number>>
->
-
-const NotePicker = forwardRef<
-  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
-  NotePickerProps
->((props, ref) => {
-  const {
-    channel,
-    disabled = false,
-    isMelodicMode = false,
-    mapping,
-    onChange,
-    value: initialValue,
-    ...rest
-  } = props
-
-  const options = useMemo(() => {
-    if (isMelodicMode) {
-      return emptyMapping()
-        .map(({ note }) => {
-          const midiNoteName = midiToNoteName(note, { sharps: false })
-            .replace('b', '♭')
-            .replace('#', '♯')
-          return `${midiNoteName} (#${note})`
-        })
-        .map(formattedListEntry)
-    }
-
-    return (mapping || emptyMapping())
-      .map(formattedMapEntry)
-      .map(formattedListEntry)
-  }, [isMelodicMode, mapping])
-
-  const [value, setValue] = useStateWithDynamicDefault(initialValue)
-
-  const handleChange = useCallback(
-    (v: number | string) => {
-      if (typeof v === 'string') return
-
-      const possibleNoteNumber = assertRange(v, 128, 0)
-
-      if (possibleNoteNumber > 0) {
-        onChange(possibleNoteNumber)
-      }
-      setValue(v)
-    },
-    [onChange, setValue],
-  )
-
-  return (
-    <Select
-      {...rest}
-      disabled={disabled}
-      // isDisabled={disabled}
-      onChange={handleChange}
-      options={options}
-      ref={ref}
-      value={value}
-    />
-  )
-})
-
-export { NotePicker }
-
-export type { NotePickerProps, NotePickerRef }

package/lib/pickers/PianoPicker.tsx

@@ -1,81 +0,0 @@
-import { Piano as ReactPiano } from 'zds-react-piano'
-import type { WithProviderProps } from '../other/OctavePlayer'
-import { SoundfontProvider } from '../other/SoundFontProvider'
-
-const firstNote = 21
-const lastNote = 108
-const numNotes = lastNote - firstNote - 1
-
-const whiteNotes = numNotes * 0.7 // approx
-
-const audioContext = new window.AudioContext()
-
-type PianoProps = {
-  activeNotes?: number[]
-  selectedNotes?: number[]
-  disabled: boolean
-  height: number
-  width: number
-}
-
-const BasePianoPicker = ({ height, width, ...rest }: PianoProps) => {
-  const keyWidth = width / whiteNotes + 2
-  const keyWidthToHeight = keyWidth / height
-
-  return (
-    <div>
-      <ReactPiano
-        keyWidthToHeight={keyWidthToHeight}
-        noteRange={{ first: firstNote, last: lastNote }}
-        width={width}
-        {...rest}
-      />
-    </div>
-  )
-}
-
-const WithProvider = ({
-  format,
-  height,
-  hostname,
-  instrumentName,
-  onChange,
-  onClick,
-  onDoubleClick,
-  onKeyMouseEnter,
-  onKeyMouseLeave,
-  selectedNotes,
-  soundfont,
-  width,
-}: WithProviderProps) => (
-  <SoundfontProvider
-    {...{
-      audioContext,
-      format,
-      hostname,
-      instrumentName,
-      onChange,
-      soundfont,
-    }}
-    render={({ isLoading, playNote, stopNote }) => (
-      <BasePianoPicker
-        disabled={isLoading}
-        {...{
-          height,
-          onClick,
-          onDoubleClick,
-          onKeyMouseEnter,
-          onKeyMouseLeave,
-          playNote,
-          selectedNotes,
-          stopNote,
-          width,
-        }}
-      />
-    )}
-  />
-)
-
-export { WithProvider as PianoPicker }
-
-export type { PianoProps }

package/lib/pickers/PolarityPicker.tsx

@@ -1,39 +0,0 @@
-import { forwardRef } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { Select } from './Select'
-import type { Option, SelectProps, noSelection } from './Select'
-
-type Polarity = 0 | 1 | typeof noSelection
-
-type PolarityPickerProps = Omit<SelectProps<Polarity>, 'options'> & {
-  labelOff?: string
-  labelOn?: string
-}
-
-type PolarityPickerRef = SelectInstance<
-  Option<Polarity>,
-  false,
-  GroupBase<Option<Polarity>>
->
-
-const PolarityPicker = forwardRef<
-  SelectInstance<Option<Polarity>, false, GroupBase<Option<Polarity>>>,
-  PolarityPickerProps
->(({ labelOff = 'Normally Off', labelOn = 'Normally On', ...rest }, ref) => {
-  const options = [
-    { value: 0, label: labelOff },
-    { value: 1, label: labelOn },
-  ] as Option<Polarity>[]
-
-  return (
-    <Select
-      {...rest}
-      options={options}
-      ref={ref}
-    />
-  )
-})
-
-export { PolarityPicker }
-
-export type { Polarity, PolarityPickerProps, PolarityPickerRef }