zds-pickers 3.11.3 → 4.0.1

package/dist/main.d.ts

@@ -0,0 +1,244 @@
+import { default as default_2 } from 'soundfont-player';
+import { ForwardRefExoticComponent } from 'react';
+import { GroupBase } from 'react-select';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { JSX as JSX_3 } from 'react';
+import { JSXElementConstructor } from 'react';
+import { Mapping } from 'zds-mappings';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { SelectInstance } from 'react-select';
+
+export declare const CCPicker: ForwardRefExoticComponent<CCPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type CCPickerProps = SelectProps<number>;
+
+export declare const ccValues: Option_2<number>[];
+
+export declare const ChannelMappingPicker: ForwardRefExoticComponent<ChannelMappingPickerProps & RefAttributes<SelectInstance<Option_2<InternalValue>, false, GroupBase<Option_2<InternalValue>>>>>;
+
+declare interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
+    channels: Option_2<number>[];
+    className?: string;
+    filterOptions?: (candidate: Option_2<InternalValue>, inputValue: string) => boolean;
+    value: number;
+    onChange: (value: InternalValue) => void;
+}
+
+export declare const ChannelPicker: ForwardRefExoticComponent<ChannelPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type ChannelPickerProps = SelectProps<number>;
+
+export declare const combineStatusWithChannel: (channel: number, status: Status_2) => number;
+
+export declare const extractStatusAndChannel: (status: number) => {
+    status: Status_2;
+    channel: number;
+};
+
+export declare const getStatusLabel: (val: Status_2) => string | number | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode>;
+
+declare type InternalValue = number | 'separator';
+
+export declare const Knob: (props: KnobProps) => JSX_2.Element;
+
+export declare const KnobPicker: ForwardRefExoticComponent<SelectProps<number> & {
+highToLow?: boolean;
+includeLabel?: boolean;
+includePicker?: boolean;
+knobProps?: Partial<KnobPickerProps>;
+max?: number;
+min?: number;
+wheelEnabled?: boolean;
+wheelSensitivity?: number;
+value: number;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type KnobPickerProps = SelectProps<number> & {
+    highToLow?: boolean;
+    includeLabel?: boolean;
+    includePicker?: boolean;
+    knobProps?: Partial<KnobPickerProps>;
+    max?: number;
+    min?: number;
+    wheelEnabled?: boolean;
+    wheelSensitivity?: number;
+    value: number;
+};
+
+declare type KnobProps = {
+    disabled?: boolean;
+    max?: number;
+    min?: number;
+    onChange?: (value: number) => void;
+    value?: number;
+    wheelEnabled?: boolean;
+    wheelSensitivity?: number;
+};
+
+export declare const LatchPicker: ForwardRefExoticComponent<LatchPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type LatchPickerProps = SelectProps<number>;
+
+export declare const MappingPicker: ForwardRefExoticComponent<SelectProps<string> & {
+allowClearing: boolean;
+} & RefAttributes<SelectInstance<Option_2<string>, false, GroupBase<Option_2<string>>>>>;
+
+export declare const MASK_CHANNEL = 15;
+
+export declare const MASK_STATUS = 240;
+
+export declare const NotePicker: ForwardRefExoticComponent<SelectProps<number> & {
+channel: number;
+disabled?: boolean;
+isMelodicMode?: boolean;
+mapping?: Mapping;
+onChange: (value: number) => void;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+export declare const OctavePlayer: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => JSX_2.Element;
+
+declare type Option_2<T> = {
+    label: React.ReactNode;
+    value: T;
+};
+
+export declare const PianoPicker: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }: WithProviderProps) => JSX_2.Element;
+
+export declare const PolarityPicker: ForwardRefExoticComponent<SelectProps<number> & {
+labelOff?: string;
+labelOn?: string;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+export declare const RESPONSE_CURVES: Option_2<number>[];
+
+export declare type ResponseCurve = {
+    value: string | number;
+    label: React.ReactNode;
+    c1: number;
+    c2: number;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    labelX: number;
+    labelY: number;
+};
+
+export declare const ResponseCurve: (props: ResponseCurveProps) => JSX_2.Element;
+
+export declare const ResponseCurvePicker: ForwardRefExoticComponent<SelectProps<number> & {
+inverted?: boolean;
+Tooltip?: React.FC<TooltipProps>;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type ResponseCurveProps = {
+    autosize: boolean;
+    disabled?: boolean;
+    inverted: boolean;
+    onChange: (event: {
+        target: {
+            value: number;
+        };
+    }) => void;
+    Tooltip: React.FC<TooltipProps>;
+    value: number;
+};
+
+export declare const Select: <T>(props: SelectProps<T> & {
+    ref?: React.ForwardedRef<SelectInstance<Option_2<T>, false, GroupBase<Option_2<T>>>>;
+}) => JSX_3.Element;
+
+declare type SelectProps<T> = {
+    className?: string;
+    components?: object;
+    disabled?: boolean;
+    filterOptions?: (candidate: Option_2<T>, inputValue: string) => boolean;
+    formatOptionLabel?: (option: Option_2<unknown>, { context }: {
+        context: 'menu' | 'value';
+    }) => React.ReactNode;
+    isSearchable?: boolean;
+    label?: string;
+    onChange: (value: Option_2<T>['value']) => void;
+    options: Option_2<T>[] | {
+        entries: Option_2<T>[];
+    }[];
+    preserveMenuWidth?: boolean;
+    shrinkLabel?: boolean;
+    value: Option_2<T>['value'];
+};
+
+declare type Status = (typeof Statuses_2)[keyof typeof Statuses_2]
+
+declare type Status_2 = (typeof Statuses)[keyof typeof Statuses];
+
+export declare const Statuses: {
+    noteOff: number;
+    noteOn: number;
+    aftertouch: number;
+    controlChange: number;
+    programChange: number;
+    channelPressure: number;
+    pitchWheel: number;
+};
+
+declare const Statuses_2 = {
+    noteOff: 8, // 1000
+    noteOn: 9, // 1001
+    aftertouch: 10, // 1010
+    controlChange: 11, // 1011
+    programChange: 12, // 1100
+    channelPressure: 13, // 1101
+    pitchWheel: 14, // 1110
+};
+
+export declare const StatusPicker: ForwardRefExoticComponent<SelectProps<number> & {
+statuses: Option_2<Status>[];
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+export declare const SVGText: (props: TextProps) => JSX_2.Element;
+
+declare 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;
+};
+
+declare type TooltipProps = {
+    children?: React.ReactNode;
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+    title: React.ReactNode;
+};
+
+export declare const ValuePicker: ForwardRefExoticComponent<SelectProps<number> & {
+highToLow?: boolean;
+max?: number;
+min?: number;
+} & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
+
+declare type WithProviderProps = {
+    format?: 'mp3' | 'ogg';
+    height: number;
+    hostname?: string;
+    instrumentName: default_2.InstrumentName;
+    octave?: number;
+    onChange?: (note: number) => void;
+    onClick?: (note: number) => void;
+    onDoubleClick?: (note: number) => void;
+    onKeyMouseEnter?: (note: number) => void;
+    onKeyMouseLeave?: (note: number) => void;
+    soundfont?: 'MusyngKite' | 'FluidR3_GM';
+    Tooltip?: TooltipProps;
+    width: number;
+};
+
+export { }

package/package.json

@@ -1,14 +1,25 @@
 {
   "name": "zds-pickers",
-  "version": "3.11.3",
+  "version": "4.0.1",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/main.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    }
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": false,
   "homepage": "https://github.com/dkadrios/zds-pickers#readme",
   "license": "MIT",
-  "main": "dist/index.js",
-  "files": [
-    "dist/**/*.js",
-    "README.md",
-    "LICENSE"
-  ],
   "author": "Darin Kadrioski <dkadrios@gmail.com>",
   "bugs": {
     "url": "https://github.com/dkadrios/zds-pickers/issues"
@@ -19,79 +30,58 @@
     "url": "git+https://github.com/dkadrios/zds-pickers.git"
   },
   "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.json && vite build",
     "build-storybook": "storybook build",
-    "build:watch": "babel src -w -d dist",
-    "build": "npm run clean && babel src -d dist --ignore **/*.spec.js,*/__config__",
-    "clean": "rimraf dist",
-    "lint:fix": "npm run lint -- --fix",
-    "lint": "eslint 'src/**'",
-    "prepare": "npm run build",
-    "sb": "storybook dev --quiet -p 6006 --ci"
+    "lint": "biome check --write",
+    "preview": "vite preview",
+    "sb": "storybook dev --quiet -p 6006 --no-open",
+    "sb:watch": "nodemon --watch .storybook -e ts,tsx,js,jsx --exec 'npm run sb'",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.0",
-    "@babel/core": "7.23.3",
-    "@babel/eslint-parser": "7.23.3",
-    "@babel/plugin-proposal-export-default-from": "7.23.3",
-    "@babel/plugin-syntax-async-generators": "7.8.4",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-syntax-import-meta": "7.10.4",
-    "@babel/plugin-transform-runtime": "7.23.3",
-    "@babel/preset-env": "7.23.3",
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-actions": "7.5.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-knobs": "7.0.2",
-    "@storybook/addon-links": "7.5.3",
-    "@storybook/addon-mdx-gfm": "7.5.3",
-    "@storybook/react": "7.5.3",
-    "@storybook/react-webpack5": "7.5.3",
-    "@studysync/eslint-plugin-jsx-conditionals": "2.0.2",
-    "@studysync/eslint-plugin-material-ui": "1.2.1",
-    "@studysync/eslint-plugin-persnickety": "1.0.5",
-    "babel-loader": "9.1.3",
-    "classnames": "2.3.2",
-    "eslint": "8.54.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-import-resolver-alias": "1.1.2",
-    "eslint-import-resolver-parcel": "1.10.6",
-    "eslint-plugin-custom-jsx-props-order": "1.0.0",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-json": "3.1.0",
-    "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-ocd": "1.1.0",
-    "eslint-plugin-prettier": "5.0.1",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "immer": "10.0.3",
-    "nebiru-react-rotary-knob": "1.1.8",
+    "@biomejs/biome": "1.9.4",
+    "@storybook/addon-actions": "8.5.0",
+    "@storybook/addon-docs": "8.5.0",
+    "@storybook/addon-essentials": "8.5.0",
+    "@storybook/addon-links": "8.5.0",
+    "@storybook/builder-vite": "8.5.0",
+    "@storybook/react-vite": "8.5.0",
+    "@storybook/react": "8.5.0",
+    "@types/d3-drag": "3.0.7",
+    "@types/d3-scale": "4.0.8",
+    "@types/d3-selection": "3.0.11",
+    "@types/react-dom": "18.3.5",
+    "@types/react": "18.3.18",
+    "@vitejs/plugin-react-swc": "3.7.2",
+    "classnames": "2.5.1",
+    "globals": "15.14.0",
+    "immer": "10.1.1",
+    "nodemon": "3.1.9",
     "prop-types": "15.8.1",
-    "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-select": "5.8.0",
-    "reduce-css-calc": "2.1.8",
-    "soundfont-player": "0.12.0",
-    "storybook": "7.5.3",
-    "tonal": "5.0.0",
-    "zds-mappings": "1.4.9",
-    "zds-react-piano": "4.0.10"
+    "react": "18.2.0",
+    "storybook": "8.5.0",
+    "typescript": "5.7.3",
+    "vite-plugin-dts": "4.5.0",
+    "vite": "6.0.7",
+    "zds-mappings": "1.4.9"
   },
   "dependencies": {
-    "caniuse-lite": "^1.0.30001563"
+    "caniuse-lite": "1.0.30001695",
+    "d3-drag": "3.0.0",
+    "d3-scale": "4.0.2",
+    "d3-selection": "3.0.0",
+    "react-select": "5.9.0",
+    "react-svgmt": "2.0.2",
+    "soundfont-player": "0.12.0",
+    "tonal": "6.4.0",
+    "zds-react-piano": "4.0.10"
   },
   "peerDependencies": {
-    "classnames": "^2.3.2",
-    "nebiru-react-rotary-knob": "1.1.8",
-    "prop-types": "^15.8.1",
-    "react": ">=18.2.0",
-    "react-select": ">=5.5.4",
-    "reduce-css-calc": ">=2.1.8",
-    "soundfont-player": ">=0.12.0",
-    "tonal": "5.0.0",
-    "zds-mappings": "^1.4.9",
-    "zds-react-piano": ">=4"
+    "classnames": ">=2.5.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "zds-mappings": "1.4.9"
   }
 }

package/dist/hooks/useComponentSize.js

@@ -1,54 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray"; /* eslint-disable consistent-return */
-import { useCallback, useLayoutEffect, useState } from 'react';
-
-var getSize = function getSize(el) {return el ?
-  {
-    width: el.offsetWidth,
-    height: el.offsetHeight
-  } :
-  {
-    width: 0,
-    height: 0
-  };};
-
-var useComponentSize = function useComponentSize(ref) {
-  var _useState = useState(getSize(ref ? ref.current : {})),_useState2 = _slicedToArray(_useState, 2),componentSize = _useState2[0],setComponentSize = _useState2[1];
-
-  var handleResize = useCallback(function () {
-    if (ref.current) {
-      setComponentSize(getSize(ref.current));
-    }
-  }, [ref]);
-
-  useLayoutEffect(
-    function () {
-      if (!ref.current) return;
-
-      handleResize();
-
-      if (typeof ResizeObserver === 'function') {
-        var resizeObserver = new ResizeObserver(function () {
-          handleResize();
-        });
-        resizeObserver.observe(ref.current);
-
-        return function () {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
-          resizeObserver.disconnect(ref.current);
-          resizeObserver = null;
-        };
-      }
-      window.addEventListener('resize', handleResize);
-
-      return function () {
-        window.removeEventListener('resize', handleResize);
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [ref.current]
-  );
-
-  return componentSize;
-};
-
-export default useComponentSize;

package/dist/hooks/useStateWithDynamicDefault.js

@@ -1,11 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import { useEffect, useState } from 'react';
-
-export default (function (defaultVal) {
-  var _useState = useState(defaultVal),_useState2 = _slicedToArray(_useState, 2),state = _useState2[0],setState = _useState2[1];
-
-  useEffect(function () {
-    setState(defaultVal);
-  }, [defaultVal]);
-
-  return [state, setState];
-});

package/dist/index.js

@@ -1,43 +0,0 @@
-// Pickers
-export { default as CCPicker } from './pickers/CCPicker';
-export { default as ChannelMappingPicker } from './pickers/ChannelMappingPicker';
-export { default as ChannelPicker } from './pickers/ChannelPicker';
-export { default as Knob } from './pickers/Knob';
-export { default as KnobPicker } from './pickers/KnobPicker';
-export { default as LatchPicker } from './pickers/LatchPicker';
-export { default as MappingPicker } from './pickers/MappingPicker';
-export { default as NotePicker } from './pickers/NotePicker';
-export { default as OctavePlayer } from './other/OctavePlayer';
-export { default as PianoPicker } from './pickers/PianoPicker';
-export { default as PolarityPicker } from './pickers/PolarityPicker';
-export { default as ResponseCurvePicker } from './pickers/ResponseCurvePicker';
-export { default as Select } from './pickers/Select';
-export { default as StatusPicker } from './pickers/StatusPicker';
-export { default as SVGText } from './other/SVGText';
-export { default as ValuePicker } from './pickers/ValuePicker';
-
-// MIDI
-export {
-  default as statuses,
-  getStatusLabel,
-  combineStatus,
-  extractStatus,
-  STATUS_NOTE_OFF,
-  STATUS_NOTE_ON,
-  STATUS_AFTER_TOUCH,
-  STATUS_CONTROL_CHANGE,
-  STATUS_PROGRAM_CHANGE,
-  STATUS_CHANNEL_PRESSURE,
-  STATUS_PITCH_WHEEL,
-  MASK_CHANNEL,
-  MASK_STATUS } from
-'./midi/statuses';
-
-export {
-  default as ResponseCurve,
-  RESPONSE_CURVES } from
-'./pickers/ResponseCurve';
-
-export { default as ccValues } from './midi/ccValues';
-
-export { assertRange, memoize } from './utils';

package/dist/midi/ccValues.js

@@ -1,137 +0,0 @@
-var CC_NAMES = [
-'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(function (label, value) {return {
-    label: String(label).length ? "".concat(
-      value, " - ").concat(label) :
-    value,
-    value: value
-  };});
-
-export default CC_NAMES;

package/dist/midi/statuses.js

@@ -1,33 +0,0 @@
-/* eslint-disable no-bitwise */
-
-export var STATUS_NOTE_OFF = 8; // 1000
-export var STATUS_NOTE_ON = 9; // 1001
-export var STATUS_AFTER_TOUCH = 10; // 1010
-export var STATUS_CONTROL_CHANGE = 11; // 1011
-export var STATUS_PROGRAM_CHANGE = 12; // 1100
-export var STATUS_CHANNEL_PRESSURE = 13; // 1101
-export var STATUS_PITCH_WHEEL = 14; // 1110
-
-export var MASK_CHANNEL = 15; // 00001111
-export var MASK_STATUS = 240; // 01110000
-
-var statuses = [
-{ value: STATUS_NOTE_ON, label: 'Note On' },
-{ value: STATUS_NOTE_OFF, label: 'Note Stack' },
-{ value: STATUS_CONTROL_CHANGE, label: 'Control Change' },
-{ value: STATUS_PROGRAM_CHANGE, label: 'Program Change' },
-{ value: STATUS_AFTER_TOUCH, label: 'Aftertouch' },
-{ value: STATUS_CHANNEL_PRESSURE, label: 'Channel Pressure' },
-{ value: STATUS_PITCH_WHEEL, label: 'Pitch Wheel' }];
-
-
-export var getStatusLabel = function getStatusLabel(val) {var _statuses$filter$;return ((_statuses$filter$ = statuses.filter(function (_ref) {var value = _ref.value;return value === val;})[0]) === null || _statuses$filter$ === void 0 ? void 0 : _statuses$filter$.label) || '???';};
-
-export var combineStatus = function combineStatus(channel, status) {return channel | status << 4;};
-
-export var extractStatus = function extractStatus(status) {return {
-    status: (status & MASK_STATUS) >> 4 | 8,
-    channel: status & MASK_CHANNEL
-  };};
-
-export default statuses;