zds-pickers 4.0.12 → 4.0.14

package/lib/pickers/PianoPicker.tsx

@@ -1,6 +1,6 @@
 import { Piano as ReactPiano } from 'zds-react-piano'
 import type { WithProviderProps } from '../other/OctavePlayer'
-import SoundfontProvider from '../other/SoundFontProvider'
+import { SoundfontProvider } from '../other/SoundFontProvider'
 
 const firstNote = 21
 const lastNote = 108
@@ -16,7 +16,7 @@ type PianoProps = {
   width: number
 }
 
-const PianoPicker = ({ height, width, ...rest }: PianoProps) => {
+const BasePianoPicker = ({ height, width, ...rest }: PianoProps) => {
   const keyWidth = width / whiteNotes + 2
   const keyWidthToHeight = keyWidth / height
 
@@ -55,7 +55,7 @@ const WithProvider = ({
       soundfont,
     }}
     render={({ isLoading, playNote, stopNote }) => (
-      <PianoPicker
+      <BasePianoPicker
         disabled={isLoading}
         {...{
           height,
@@ -72,6 +72,6 @@ const WithProvider = ({
   />
 )
 
-export default WithProvider
+export { WithProvider as PianoPicker }
 
 export type { PianoProps }

package/lib/pickers/PolarityPicker.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
-import Select from './Select'
+import { Select } from './Select'
 import type { Option, SelectProps } from './Select'
 
 type Polarity = 0 | 1
@@ -34,6 +34,6 @@ const PolarityPicker = forwardRef<
   )
 })
 
-export default PolarityPicker
+export { PolarityPicker }
 
 export type { Polarity, PolarityPickerProps, PolarityPickerRef }

package/lib/pickers/ResponseCurve.tsx

@@ -1,29 +1,13 @@
 import { useRef } from 'react'
 import useComponentSize from '../hooks/useComponentSize'
-import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
-import SVGText from '../other/SVGText'
-import type { Option } from './Select'
-
-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
-
-type Curve =
-  | typeof RESPONSE_CURVE_0
-  | typeof RESPONSE_CURVE_1
-  | typeof RESPONSE_CURVE_2
-  | typeof RESPONSE_CURVE_3
-  | typeof RESPONSE_CURVE_4
-  | typeof RESPONSE_CURVE_5
-  | typeof RESPONSE_CURVE_6
-  | typeof RESPONSE_CURVE_7
-
-type ResponseCurve = {
+import {
+  type Curve,
+  responseCurves as origResponseCurves,
+} from '../midi/export'
+import { DefaultTooltip, type TooltipProps } from '../other/DefaultTooltip'
+import { SvgText } from '../other/SvgText'
+
+type ResponseCurveType = {
   value: Curve
   label: React.ReactNode
   c1: number
@@ -36,41 +20,6 @@ type ResponseCurve = {
   labelY: number
 }
 
-const RESPONSE_CURVES: Option<Curve>[] = [
-  {
-    value: RESPONSE_CURVE_7,
-    label: 'Always maxed out.',
-  },
-  {
-    value: RESPONSE_CURVE_6,
-    label: 'Most sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_5,
-    label: 'Moderately sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_4,
-    label: 'A little sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_0,
-    label: 'Linear, no change.',
-  },
-  {
-    value: RESPONSE_CURVE_1,
-    label: 'A little less sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_2,
-    label: 'Even less sensitive.',
-  },
-  {
-    value: RESPONSE_CURVE_3,
-    label: 'Least sensitive.',
-  },
-]
-
 // const width = 218
 // const height = 150
 const axisOffset = 20
@@ -113,9 +62,9 @@ const ResponseCurve = (props: ResponseCurveProps) => {
 
   const svgProps = { ref: svgRef }
 
-  const responseCurves = RESPONSE_CURVES.map(
+  const responseCurves = origResponseCurves.map(
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: <explanation>
-    ({ value, label }): ResponseCurve => {
+    ({ value, label }): ResponseCurveType => {
       let c1 = 0
       let c2 = 0
       let x1 = axisX1
@@ -125,55 +74,55 @@ const ResponseCurve = (props: ResponseCurveProps) => {
       let labelX = xMid
       let labelY = yMid
       switch (value) {
-        case RESPONSE_CURVE_0:
+        case responseCurves[0].value:
           c1 = xMid
           c2 = yMid
           labelY += 3
 
           break
-        case RESPONSE_CURVE_1:
+        case responseCurves[1].value:
           c1 = inverted ? xMid + width * 0.13 : xMid - width * 0.13
           c2 = yMid - height * 0.13
           labelX = inverted ? xMid + width * 0.1 : xMid - width * 0.1
           labelY = yMid - height * 0.09
           break
 
-        case RESPONSE_CURVE_2:
+        case responseCurves[2].value:
           c1 = inverted ? xMid + width * 0.25 : xMid - width * 0.25
           c2 = yMid - height * 0.25
           labelX = inverted ? xMid + width * 0.2 : xMid - width * 0.2
           labelY = yMid - height * 0.17
           break
 
-        case RESPONSE_CURVE_3:
+        case responseCurves[3].value:
           c1 = inverted ? xMid + width * 0.35 : xMid - width * 0.35
           c2 = yMid - height * 0.35
           labelX = inverted ? xMid + width * 0.28 : xMid - width * 0.28
           labelY = yMid - height * 0.25
           break
 
-        case RESPONSE_CURVE_4:
+        case responseCurves[4].value:
           c1 = inverted ? xMid - width * 0.13 : xMid + width * 0.13
           c2 = yMid + height * 0.13
           labelX = inverted ? xMid - width * 0.1 : xMid + width * 0.1
           labelY = yMid + height * 0.1
           break
 
-        case RESPONSE_CURVE_5:
+        case responseCurves[5].value:
           c1 = inverted ? xMid - width * 0.25 : xMid + width * 0.25
           c2 = yMid + height * 0.25
           labelX = inverted ? xMid - width * 0.2 : xMid + width * 0.2
           labelY = yMid + height * 0.18
           break
 
-        case RESPONSE_CURVE_6:
+        case responseCurves[6].value:
           c1 = inverted ? xMid - width * 0.35 : xMid + width * 0.35
           c2 = yMid + height * 0.35
           labelX = inverted ? xMid - width * 0.28 : xMid + width * 0.28
           labelY = yMid + height * 0.25
           break
 
-        case RESPONSE_CURVE_7:
+        case responseCurves[7].value:
           x1 = inverted ? axisX1 : axisX2
           y1 = axisY1
           x2 = x1
@@ -217,7 +166,7 @@ const ResponseCurve = (props: ResponseCurveProps) => {
           y={0}
         />
 
-        <SVGText
+        <SvgText
           className="axis"
           textAnchor="middle"
           transform={`translate(${axisX1 - 14} ${height / 2}) rotate(90)`}
@@ -226,7 +175,7 @@ const ResponseCurve = (props: ResponseCurveProps) => {
           text="Applied force"
         />
 
-        <SVGText
+        <SvgText
           className="axis"
           textAnchor="middle"
           transform={`translate(${width / 2} ${axisY2 + 13})`}
@@ -297,8 +246,6 @@ const ResponseCurve = (props: ResponseCurveProps) => {
   )
 }
 
-export default ResponseCurve
-
-export { RESPONSE_CURVES }
+export { ResponseCurve }
 
-export type { Curve, ResponseCurve, ResponseCurveProps }
+export type { ResponseCurveType, ResponseCurveProps }

package/lib/pickers/ResponseCurvePicker.tsx

@@ -1,9 +1,10 @@
 import { forwardRef, useCallback } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
-import DefaultTooltip, { type TooltipProps } from '../other/DefaultTooltip'
+import { type Curve, responseCurves } from '../midi/export'
+import { DefaultTooltip, type TooltipProps } from '../other/DefaultTooltip'
 import { findObj } from '../utils'
-import ResponseCurve, { type Curve, RESPONSE_CURVES } from './ResponseCurve'
-import Select from './Select'
+import { ResponseCurve } from './ResponseCurve'
+import { Select } from './Select'
 import type { Option, SelectProps } from './Select'
 
 type ResponseCurvePickerProps = SelectProps<Curve> & {
@@ -32,7 +33,7 @@ const ResponseCurvePicker = forwardRef<
   const Placeholder = useCallback(
     () => (
       <div className="singleValue">
-        {(findObj('value', value)(RESPONSE_CURVES) as Option<Curve>)?.label}
+        {(findObj('value', value)(responseCurves) as Option<Curve>)?.label}
       </div>
     ),
     [value],
@@ -69,6 +70,6 @@ const ResponseCurvePicker = forwardRef<
   )
 })
 
-export default ResponseCurvePicker
+export { ResponseCurvePicker }
 
 export type { ResponseCurvePickerProps, ResponseCurvePickerRef }

package/lib/pickers/Select.tsx

@@ -243,6 +243,6 @@ const Select = forwardRef(
   },
 ) => JSX.Element
 
-export default Select
+export { Select }
 
 export type { Option, SelectProps }

package/lib/pickers/StatusPicker.tsx

@@ -1,7 +1,7 @@
 import type { Status } from 'lib/midi/export'
 import { forwardRef } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
-import Select from './Select'
+import { Select } from './Select'
 import type { Option, SelectProps } from './Select'
 
 type StatusPickerProps = SelectProps<Status> & { statuses: Option<Status>[] }
@@ -23,6 +23,6 @@ const StatusPicker = forwardRef<
   />
 ))
 
-export default StatusPicker
+export { StatusPicker }
 
 export type { StatusPickerProps, StatusPickerRef }

package/lib/pickers/ValuePicker.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useCallback, useMemo } from 'react'
 import type { GroupBase, SelectInstance } from 'react-select'
 import useStateWithDynamicDefault from '../hooks/useStateWithDynamicDefault'
 import { arraySequence, assertRange } from '../utils'
-import Select from './Select'
+import { Select } from './Select'
 import type { Option, SelectProps } from './Select'
 
 type ValuePickerProps = SelectProps<number> & {
@@ -62,6 +62,6 @@ const ValuePicker = forwardRef<
   )
 })
 
-export default ValuePicker
+export { ValuePicker }
 
 export type { ValuePickerProps, ValuePickerRef }

package/lib/pickers/knobSkin10.tsx

@@ -91,4 +91,4 @@ const knobSkin10 = {
   ],
 }
 
-export default knobSkin10
+export { knobSkin10 }

package/lib/rotaryKnob/InternalInput.tsx

@@ -40,4 +40,4 @@ class InternalInput extends React.Component<InternalInputProps> {
   }
 }
 
-export default InternalInput
+export { InternalInput }

package/lib/rotaryKnob/helpers/DrawCircle.tsx

@@ -38,4 +38,4 @@ class DrawCircle extends React.Component<DrawCircleProps> {
   }
 }
 
-export default DrawCircle
+export { DrawCircle }

package/lib/rotaryKnob/helpers/DrawLine.tsx

@@ -29,4 +29,4 @@ class DrawLine extends React.Component<DrawLineProps> {
   }
 }
 
-export default DrawLine
+export { DrawLine }

package/lib/rotaryKnob/helpers/HelpersOverlay.tsx

@@ -40,4 +40,4 @@ class HelpersOverlay extends React.Component<HelpersOverlayProps> {
   }
 }
 
-export default HelpersOverlay
+export { HelpersOverlay }

package/lib/rotaryKnob/helpers/KnobVisualHelpers.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import type { Point } from '../Types'
-import utils from '../utils'
-import DrawCircle from './DrawCircle'
-import DrawLine from './DrawLine'
-import HelpersOverlay from './HelpersOverlay'
+import { DrawCircle } from './DrawCircle'
+import { DrawLine } from './DrawLine'
+import { HelpersOverlay } from './HelpersOverlay'
+import { toRadians } from '../utils'
 
 /** Precision visual helpers */
 
@@ -49,9 +49,8 @@ class KnobVisualHelpers extends React.Component<
     //Calculate current angle segment end point
     //Note: Not sure why we need to subtract 90 here
     const valueMarkerX =
-      props.radius * Math.cos(utils.toRadians(props.valueAngle - 90))
-    const valueMarkerY =
-      props.radius * Math.sin(utils.toRadians(props.valueAngle - 90))
+      props.radius * Math.cos(toRadians(props.valueAngle - 90))
+    const valueMarkerY = props.radius * Math.sin(toRadians(props.valueAngle - 90))
 
     return {
       ...state,

package/lib/rotaryKnob/index.tsx

@@ -9,11 +9,11 @@ import { select } from 'd3-selection'
 import type { BaseType, Selection } from 'd3-selection'
 import { useEffect, useRef, useState } from 'react'
 import { SvgLoader, SvgProxy } from 'react-svgmt'
-import InternalInput from './InternalInput'
+import { InternalInput } from './InternalInput'
 import type { Point } from './Types'
 import { KnobVisualHelpers } from './helpers/KnobVisualHelpers'
 import defaultSkin from './knobdefaultskin'
-import utils from './utils'
+import { getAngleForPoint } from './utils'
 
 /**
  * type definition for the skin system attribute modification element
@@ -247,7 +247,7 @@ const RotaryKnob = (props: KnobProps) => {
       onStart()
 
       startPos = { x: event.x - cx, y: event.y - cy }
-      startAngle = utils.getAngleForPoint(startPos.x, startPos.y)
+      startAngle = getAngleForPoint(startPos.x, startPos.y)
       initialAngle = convertValueToAngle(currentValue)
       monitoring = false
 
@@ -263,14 +263,14 @@ const RotaryKnob = (props: KnobProps) => {
       if (preciseMode) {
         if (!monitoring && distanceFromCenter >= unlockDistance) {
           startPos = currentPos
-          startAngle = utils.getAngleForPoint(currentPos.x, currentPos.y)
+          startAngle = getAngleForPoint(currentPos.x, currentPos.y)
           monitoring = true
         }
       } else {
         monitoring = true
       }
 
-      const currentAngle = utils.getAngleForPoint(currentPos.x, currentPos.y)
+      const currentAngle = getAngleForPoint(currentPos.x, currentPos.y)
       const deltaAngle = currentAngle - startAngle
       let finalAngle = initialAngle + deltaAngle
       finalAngle = normalizeAngle(finalAngle)
@@ -414,4 +414,4 @@ const RotaryKnob = (props: KnobProps) => {
   )
 }
 
-export default RotaryKnob
+export { RotaryKnob }

package/lib/rotaryKnob/utils.ts

@@ -102,7 +102,7 @@ function transformBoundingClientRectToDocument(box: DOMRect) {
   return { top: ttop, left: tleft, width: box.width, height: box.height }
 }
 
-export default {
+export {
   // toGlobalCoordinates,
   // toLocalCoordinates,
   toRadians,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.12",
+  "version": "4.0.14",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",

package/stories/assets/utils.js

@@ -4,4 +4,4 @@
 export const arraySequence = numberOfElements =>
   Array.from(new Array(numberOfElements).keys())
 
-export default arraySequence
+export { arraySequence }

package/stories/picker.stories.tsx

@@ -4,21 +4,21 @@ import React from 'react'
 import type * as Soundfont from 'soundfont-player'
 import { getMapping } from 'zds-mappings'
 import { Statuses, statusOptions } from '../lib/midi/export'
-import OctavePlayer from '../lib/other/OctavePlayer'
-import CCPicker from '../lib/pickers/CCPicker'
-import ChannelMappingPicker from '../lib/pickers/ChannelMappingPicker'
-import ChannelPicker from '../lib/pickers/ChannelPicker'
-import Knob from '../lib/pickers/Knob'
-import KnobPicker from '../lib/pickers/KnobPicker'
-import LatchPicker from '../lib/pickers/LatchPicker'
-import MappingPicker from '../lib/pickers/MappingPicker'
-import NotePicker from '../lib/pickers/NotePicker'
-import PianoPicker from '../lib/pickers/PianoPicker'
-import PolarityPicker from '../lib/pickers/PolarityPicker'
-import ResponseCurve from '../lib/pickers/ResponseCurve'
-import ResponseCurvePicker from '../lib/pickers/ResponseCurvePicker'
-import StatusPicker from '../lib/pickers/StatusPicker'
-import ValuePicker from '../lib/pickers/ValuePicker'
+import { OctavePlayer } from '../lib/other/OctavePlayer'
+import { CCPicker } from '../lib/pickers/CCPicker'
+import { ChannelMappingPicker } from '../lib/pickers/ChannelMappingPicker'
+import { ChannelPicker } from '../lib/pickers/ChannelPicker'
+import { Knob } from '../lib/pickers/Knob'
+import { KnobPicker } from '../lib/pickers/KnobPicker'
+import { LatchPicker } from '../lib/pickers/LatchPicker'
+import { MappingPicker } from '../lib/pickers/MappingPicker'
+import { NotePicker } from '../lib/pickers/NotePicker'
+import { PianoPicker } from '../lib/pickers/PianoPicker'
+import { PolarityPicker } from '../lib/pickers/PolarityPicker'
+import { ResponseCurve } from '../lib/pickers/ResponseCurve'
+import { ResponseCurvePicker } from '../lib/pickers/ResponseCurvePicker'
+import { StatusPicker } from '../lib/pickers/StatusPicker'
+import { ValuePicker } from '../lib/pickers/ValuePicker'
 
 const meta: Meta = {
   title: 'Pickers',