zds-pickers 4.1.0 → 4.1.3

package/lib/other/SoundFontProvider.tsx

@@ -1,213 +0,0 @@
-// See https://github.com/danigb/soundfont-player
-// for more documentation on prop options.
-import { useCallback, useEffect, useState } from 'react'
-import Soundfont from 'soundfont-player'
-import { Note } from 'tonal'
-
-// Type for the MIDI global object
-interface MIDIGlobal {
-  Soundfont: Record<string, Record<string, string>>
-}
-
-// Extend global interfaces to include MIDI
-declare global {
-  interface Window {
-    MIDI?: MIDIGlobal
-  }
-  var MIDI: MIDIGlobal | undefined
-  namespace globalThis {
-    var MIDI: MIDIGlobal | undefined
-  }
-}
-// Ensure MIDI global exists before importing soundfont
-if (typeof window !== 'undefined') {
-  if (!window.MIDI) {
-    window.MIDI = { Soundfont: {} }
-  }
-}
-
-// Also ensure it's available globally (not just on window)
-if (typeof globalThis !== 'undefined') {
-  if (!globalThis.MIDI) {
-    globalThis.MIDI = window.MIDI || { Soundfont: {} }
-  }
-}
-
-// Also set it on the global object for Node.js compatibility
-if (typeof global !== 'undefined') {
-  if (!global.MIDI) {
-    global.MIDI = window.MIDI || { Soundfont: {} }
-  }
-}
-
-// Import bundled soundfont to avoid CSP issues in Electron apps
-// NOTE: This adds ~2.2MB to the bundle size. Currently all consumers need piano,
-// but if future web apps don't need audio, consider making this import conditional
-// or implementing lazy loading to reduce bundle size for audio-free use cases.
-import '../temp/acoustic_grand_piano-mp3'
-
-const isDefined = <T,>(item: T) =>
-  item !== undefined && item !== null && !Number.isNaN(item)
-
-type SoundfontProviderProps = {
-  audioContext: AudioContext
-  format?: 'mp3' | 'ogg'
-  hostname?: string
-  instrumentName?: Soundfont.InstrumentName
-  onChange?: (midiNumber: number) => void
-  render: (props: {
-    isLoading: boolean
-    playNote: (midiNumber: number) => void
-    stopNote: (midiNumber: number) => void
-    stopAllNotes: () => void
-  }) => React.ReactNode
-  soundfont?: 'MusyngKite' | 'FluidR3_GM'
-}
-
-const SoundfontProvider = (props: SoundfontProviderProps) => {
-  const {
-    audioContext,
-    format,
-    hostname,
-    instrumentName,
-    onChange,
-    render,
-    soundfont,
-  } = props
-
-  const [isLoading, setIsLoading] = useState(true)
-  const [activeAudioNodes, setActiveAudioNodes] = useState<
-    Record<number, Soundfont.Player>
-  >({})
-  const [instrument, setInstrument] = useState<Soundfont.Player | null>(null)
-
-  const loadInstrument = useCallback(
-    (nm: Soundfont.InstrumentName) => {
-      // Re-trigger loading state
-      setInstrument(null)
-
-      if (isDefined(hostname)) {
-        // pull from an url
-        Soundfont.instrument(audioContext, nm, {
-          format,
-          soundfont,
-          nameToUrl: (name: string, sf: string, fmt: string) =>
-            `${hostname}/${sf}/${name}-${fmt}.js`,
-        }).then(newInstrument => {
-          setInstrument(newInstrument)
-        })
-      } else if (instrumentName) {
-        // the host app has already injected the soundfont into global space
-        // Try to create a player directly from our bundled soundfont data
-        const soundfontData = window.MIDI?.Soundfont?.[instrumentName]
-        if (soundfontData) {
-          // MIDI note number to note name conversion using Tonal
-          const midiToNoteName = (midiNumber: number | string): string => {
-            const num =
-              typeof midiNumber === 'string'
-                ? Number.parseInt(midiNumber, 10)
-                : midiNumber
-            return Note.fromMidi(num)
-          }
-
-          // Create a simple player that can play notes from our bundled data
-          const player = {
-            play: (note: string | number, velocity?: number) => {
-              // Convert MIDI note number to note name if needed
-              const noteName = midiToNoteName(note)
-              const noteData = soundfontData[noteName]
-              if (noteData) {
-                // Create audio from the data URL
-                const audio = new Audio(noteData)
-                audio.volume = (velocity || 127) / 127
-                audio.play()
-
-                // Return a compatible object with stop method
-                return {
-                  stop: () => {
-                    audio.pause()
-                    audio.currentTime = 0
-                  },
-                }
-              }
-              return null
-            },
-            stop: () => {
-              // Simple stop implementation
-            },
-          }
-          setInstrument(player as Soundfont.Player)
-        } else {
-          setIsLoading(false)
-        }
-      } else {
-        // sound must be disabled
-        setIsLoading(false)
-      }
-    },
-    [audioContext, format, hostname, instrumentName, soundfont],
-  )
-
-  useEffect(() => {
-    if (instrumentName) {
-      loadInstrument(instrumentName)
-    }
-  }, [instrumentName, loadInstrument])
-
-  useEffect(() => {
-    if (isDefined(instrumentName)) {
-      setIsLoading(!instrument)
-    }
-  }, [instrument, instrumentName])
-
-  const playNote = (midiNumber: number) => {
-    if (instrument) {
-      audioContext.resume().then(() => {
-        const audioNode = instrument.play(String(midiNumber))
-        setActiveAudioNodes(prev => ({ ...prev, [midiNumber]: audioNode }))
-      })
-    }
-  }
-
-  const stopNote = (midiNumber: number) => {
-    audioContext.resume().then(() => {
-      if (!activeAudioNodes[midiNumber]) {
-        return
-      }
-      const audioNode = activeAudioNodes[midiNumber]
-      audioNode.stop()
-      setActiveAudioNodes(prev => {
-        const { [midiNumber]: _, ...rest } = prev
-        return rest
-      })
-    })
-    onChange?.(midiNumber)
-  }
-
-  // Clear any residual notes that don't get called with stopNote
-  const stopAllNotes = () => {
-    audioContext.resume().then(() => {
-      const nodes = Object.values(activeAudioNodes)
-      for (const node of nodes) {
-        if (node) {
-          node.stop()
-        }
-      }
-      setActiveAudioNodes(nodes)
-    })
-  }
-
-  return render({
-    isLoading,
-    playNote,
-    stopNote,
-    stopAllNotes,
-  })
-}
-
-// https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_grand_piano-mp3.js
-// https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/.js
-
-export { SoundfontProvider }
-
-export type { SoundfontProviderProps }

package/lib/other/SvgText.tsx

@@ -1,221 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-const MEASUREMENT_ELEMENT_ID = '__react_svg_text_measurement_id'
-
-type WordsByLine = {
-  words: string[]
-  width: number
-  showLine: boolean
-}
-
-const calculateWordsByLines = (
-  text: string,
-  wordWidths: WordWidths,
-  maxWidth: number,
-  maxHeight: number,
-) => {
-  const { lineHeight, spaceWidth, wordsWithComputedWidth } = wordWidths
-
-  return text.split(/\s+/).reduce((result: WordsByLine[], word) => {
-    const wordWidth = wordsWithComputedWidth[word]
-    const currentLine = result[result.length - 1]
-    if (currentLine && currentLine.width + wordWidth + spaceWidth < maxWidth) {
-      // Word can be added to an existing line
-      currentLine.words.push(word)
-      currentLine.width += wordWidth + spaceWidth
-    } else {
-      // Add first word to line or word is too long to scaleToFit on existing line
-      const newLine: WordsByLine = {
-        words: [word],
-        width: wordWidth,
-        showLine: maxHeight
-          ? lineHeight * (result.length + 1) < maxHeight
-          : true,
-      }
-      result.push(newLine)
-    }
-    return result
-  }, [])
-}
-
-type WordWidths = {
-  wordsWithComputedWidth: Record<string, number>
-  spaceWidth: number
-  lineHeight: number
-}
-
-const calculateWordWidths = (
-  style?: CSSStyleDeclaration,
-  textNode?: SVGGraphicsElement | null,
-  text?: string,
-): WordWidths | undefined => {
-  if (style && textNode) {
-    // biome-ignore lint/complexity/noForEach: <explanation>
-    Array.from(style).forEach(key =>
-      textNode.style.setProperty(
-        key,
-        style.getPropertyValue(key),
-        style.getPropertyPriority(key),
-      ),
-    )
-    const wordArray = [...new Set(String(text).split(/\s+/))]
-    const wordsWithComputedWidth = wordArray.reduce((wordMap, word) => {
-      textNode.textContent = word
-      // biome-ignore lint/performance/noAccumulatingSpread: <explanation>
-      return { ...wordMap, [word]: textNode.getBBox().width }
-    }, {})
-
-    textNode.textContent = '\u00A0'
-
-    const spaceWidth =
-      (textNode as SVGTextContentElement)?.getComputedTextLength?.() || 8
-    const lineHeight = textNode.getBBox().height
-
-    textNode.setAttribute('style', '')
-    return { wordsWithComputedWidth, spaceWidth, lineHeight }
-  }
-  return undefined
-}
-
-type TextProps = Partial<HTMLOrSVGElement> & {
-  className?: string
-  dx?: number
-  dy?: number
-  maxHeight?: number
-  maxWidth?: number
-  transform?: string
-  text: string
-  textAnchor?: React.CSSProperties['textAnchor']
-  verticalAnchor?: 'start' | 'middle' | 'end'
-  x?: number
-  y?: number
-}
-
-const SvgText = (props: TextProps) => {
-  const {
-    className = '',
-    dx = 0,
-    dy = 0,
-    maxHeight = 1000,
-    maxWidth = 1000,
-    // textAnchor = 'start',
-    text = '',
-    verticalAnchor = 'start',
-    x = 0,
-    y = 0,
-    transform = '',
-    ...rest
-  } = props
-  const [wordWidths, setWordWidths] = useState<WordWidths>()
-  const [textLines, setTextLines] = useState<WordsByLine[]>([])
-  const [style, setComputedStyle] = useState<CSSStyleDeclaration>()
-  const measureRef = useRef<SVGSVGElement | HTMLElement>({} as HTMLElement)
-
-  const displayedLines: WordsByLine[] = useMemo(() => {
-    const result = textLines.filter(({ showLine }) => showLine)
-    return result.length
-      ? result
-      : text
-          .split(/\n/)
-          .map(line => ({ words: [line], width: 0, showLine: true }))
-  }, [textLines, text])
-
-  const ref: React.LegacyRef<SVGTextElement> = useCallback(
-    (node: SVGTextElement | null) => {
-      setComputedStyle(
-        node !== null ? window.getComputedStyle(node) : undefined,
-      )
-    },
-    [],
-  )
-
-  useEffect(() => {
-    const el = document.getElementById(MEASUREMENT_ELEMENT_ID)
-    if (el === null) {
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-      svg.setAttribute('id', MEASUREMENT_ELEMENT_ID)
-      document.body.appendChild(svg)
-      svg.appendChild(
-        document.createElementNS('http://www.w3.org/2000/svg', 'text'),
-      )
-      measureRef.current = svg
-      return () => {
-        document.body.removeChild(svg)
-      }
-    }
-    measureRef.current = el
-  }, [])
-
-  useEffect(() => {
-    const wordWithWidths = calculateWordWidths(
-      style,
-      measureRef.current as SVGGraphicsElement | null,
-      text,
-    )
-
-    setWordWidths(wordWithWidths)
-  }, [text, style])
-
-  useEffect(() => {
-    if (maxWidth && wordWidths) {
-      const lines = text
-        .split(/\n/)
-        .flatMap(line =>
-          calculateWordsByLines(line, wordWidths, maxWidth, maxHeight),
-        )
-
-      setTextLines(lines)
-    }
-  }, [maxHeight, maxWidth, wordWidths, text])
-
-  const startDy = useMemo(() => {
-    if (wordWidths?.lineHeight) {
-      switch (verticalAnchor) {
-        case 'start':
-          return wordWidths.lineHeight
-
-        case 'middle':
-          return -(((displayedLines.length - 1) * wordWidths.lineHeight) / 2)
-
-        default:
-          return -(displayedLines.length - 1) * wordWidths.lineHeight
-      }
-    }
-    return 0
-  }, [displayedLines.length, verticalAnchor, wordWidths?.lineHeight])
-
-  return (
-    <text
-      className={className}
-      ref={ref}
-      dx={dx}
-      dy={dy}
-      x={x}
-      y={y}
-      // textAnchor={textAnchor}
-      transform={transform}
-      {...rest}>
-      <>
-        {displayedLines.map((line, idx) => (
-          <tspan
-            dx={x + dx}
-            dy={idx === 0 ? startDy + dy : wordWidths?.lineHeight || 0}
-            key={idx}
-            x={0}>
-            {line.words.join(' ')}
-          </tspan>
-        ))}
-        {textLines.length && displayedLines.length !== textLines.length && (
-          <>
-            <tspan>...</tspan>
-            <title>{text}</title>
-          </>
-        )}
-      </>
-    </text>
-  )
-}
-
-export { SvgText, MEASUREMENT_ELEMENT_ID }
-
-export type { TextProps, WordWidths, WordsByLine }

package/lib/pickers/CCPicker.tsx

@@ -1,28 +0,0 @@
-import { forwardRef } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { changeControllerOptions } from '../midi/ccValues'
-import { Select } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type CCPickerProps = Omit<SelectProps<number>, 'options'>
-
-type CCPickerRef = SelectInstance<
-  Option<number>,
-  false,
-  GroupBase<Option<number>>
->
-
-const CCPicker = forwardRef<
-  SelectInstance<Option<number>, false, GroupBase<Option<number>>>,
-  CCPickerProps
->((props, ref) => (
-  <Select
-    {...props}
-    options={changeControllerOptions}
-    ref={ref}
-  />
-))
-
-export { CCPicker }
-
-export type { CCPickerProps, CCPickerRef }

package/lib/pickers/ChannelMappingPicker.tsx

@@ -1,150 +0,0 @@
-import cl from 'classnames'
-import { forwardRef, useCallback, useEffect, useState } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { arraySequence } from '../utils'
-import { Select, noSelection } from './Select'
-import type { Option, SelectProps } from './Select'
-
-type InternalValue = number | 'separator'
-// type ExternalValue = number
-
-type ChannelMappingOption = Option<InternalValue>
-
-const defaultOptions: ChannelMappingOption[] = arraySequence(16).map(value => ({
-  value,
-  label: value,
-}))
-
-interface ChannelMappingPickerProps
-  extends Omit<SelectProps<InternalValue>, 'options'> {
-  channels: Option<number>[]
-  className?: string
-  filterOptions?: (
-    candidate: Option<InternalValue>,
-    inputValue: string,
-  ) => boolean
-  value: number
-  onChange: (value: InternalValue) => void
-}
-
-type ChannelMappingPickerRef = SelectInstance<
-  Option<number>,
-  false,
-  GroupBase<Option<number>>
->
-
-type FormatOptionLabelFunction = NonNullable<
-  SelectProps<InternalValue>['formatOptionLabel']
->
-
-const ChannelMappingPicker = forwardRef<
-  SelectInstance<
-    Option<InternalValue>,
-    false,
-    GroupBase<Option<InternalValue>>
-  >,
-  ChannelMappingPickerProps
->(({ channels, className, ...rest }, ref) => {
-  const [options, setOptions] = useState<Option<InternalValue>[]>([])
-
-  const formatOptionLabel: FormatOptionLabelFunction = useCallback(
-    ({ value, label }, { context }) => {
-      if (value === 'separator') {
-        return <span className="zds-mappings-user-mapping">{label}</span>
-      }
-
-      if (typeof value !== 'number') return null
-
-      const mapping = channels[value]
-
-      return mapping ? (
-        <span className="mapping-entry">
-          <b>
-            {value !== noSelection && (
-              <>
-                {value + 1}
-                {context === 'value' && ' -'}
-              </>
-            )}
-          </b>
-          <span className="mapping-entry-label">{mapping.label}</span>
-        </span>
-      ) : (
-        <span className="mapping-entry empty-mapping-entry">
-          <b>
-            {value !== noSelection && (
-              <>
-                {value + 1}
-                {context === 'value' && ' -'}
-              </>
-            )}
-          </b>
-          <span className="mapping-entry-label">no mapping</span>
-        </span>
-      )
-    },
-    [channels],
-  )
-
-  useEffect(() => {
-    const result = defaultOptions.sort(
-      (a: ChannelMappingOption, b: ChannelMappingOption) => {
-        if (
-          typeof a.value === 'number' &&
-          typeof b.value === 'number' &&
-          channels[a.value] &&
-          !channels[b.value]
-        ) {
-          return -1
-        }
-
-        if (
-          typeof a.value === 'number' &&
-          typeof b.value === 'number' &&
-          !channels[a.value] &&
-          channels[b.value]
-        ) {
-          return 1
-        }
-
-        if (typeof a.value === 'number' && typeof b.value === 'number') {
-          return a.value - b.value
-        }
-        return 0
-      },
-    )
-
-    const numFilled = result.filter(
-      ({ value }) =>
-        (typeof value === 'number' && !!channels[value]) ||
-        value === noSelection,
-    ).length
-
-    const separatorExists = result.some(({ value }) => value === 'separator')
-
-    if (numFilled && numFilled < 16 && !separatorExists) {
-      // insert a separator after the count of filled items
-      result.splice(numFilled, 0, { label: <hr />, value: 'separator' })
-    }
-
-    setOptions(result)
-  }, [channels])
-
-  return (
-    <Select<InternalValue>
-      {...rest}
-      className={cl(className, 'channel-mapping-picker')}
-      formatOptionLabel={formatOptionLabel}
-      options={options}
-      ref={ref}
-    />
-  )
-})
-
-export { ChannelMappingPicker }
-
-export type {
-  ChannelMappingOption,
-  ChannelMappingPickerProps,
-  ChannelMappingPickerRef,
-}

package/lib/pickers/ChannelPicker.tsx

@@ -1,84 +0,0 @@
-import cl from 'classnames'
-import { forwardRef, useCallback } from 'react'
-import type { GroupBase, SelectInstance } from 'react-select'
-import { arraySequence } from '../utils'
-import { Select } from './Select'
-import { type Option, type SelectProps, noSelection } from './Select'
-
-type Channel =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | typeof noSelection
-
-interface FormatOptionLabelContext {
-  context: 'menu' | 'value'
-}
-
-type ChannelPickerProps = Omit<SelectProps<Channel>, 'options'>
-
-type ChannelPickerRef = SelectInstance<
-  Option<Channel>,
-  false,
-  GroupBase<Option<Channel>>
->
-
-const options: Option<Channel>[] = arraySequence(16).map(value => ({
-  value: value as Channel,
-  label: `Channel ${value + 1}`,
-}))
-
-const filterOptions = (option: Option<Channel>, input: string) => {
-  // console.log(option, input)
-
-  if (input) {
-    return String(option.label).toLowerCase().includes(input.toLowerCase())
-  }
-  return true
-}
-
-const ChannelPicker = forwardRef<
-  SelectInstance<Option<Channel>, false, GroupBase<Option<Channel>>>,
-  ChannelPickerProps
->(({ className, value = noSelection, ...rest }, ref) => {
-  const formatOptionLabel = useCallback(
-    (option: Option<unknown>, { context }: FormatOptionLabelContext) => {
-      if (value === undefined) {
-        return '--'
-      }
-      return context === 'value'
-        ? option.label
-        : Number.parseInt(String(option.value)) + 1 // menu, e.g. the list of options
-    },
-    [value],
-  )
-
-  return (
-    <Select
-      {...rest}
-      className={cl(className, 'channel-picker')}
-      filterOptions={filterOptions}
-      formatOptionLabel={formatOptionLabel}
-      options={options}
-      value={value}
-      ref={ref}
-    />
-  )
-})
-
-export { ChannelPicker }
-
-export type { Channel, ChannelPickerProps, ChannelPickerRef }