zds-pickers 4.0.3 → 4.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/.editorconfig +19 -0
  2. package/.github/workflows/codeql-analysis.yml +67 -0
  3. package/.nvmrc +1 -0
  4. package/.prettierignore +0 -0
  5. package/.prettierrc +13 -0
  6. package/.storybook/main.ts +42 -0
  7. package/.storybook/manager.ts +12 -0
  8. package/.storybook/preview.tsx +26 -0
  9. package/.vscode/extensions.json +32 -0
  10. package/.vscode/javascript.code-snippets +229 -0
  11. package/.vscode/settings.json +358 -0
  12. package/biome.jsonc +158 -0
  13. package/dist/index.cjs.js +15 -32
  14. package/dist/index.es.js +4144 -10129
  15. package/dist/types/hooks/useComponentSize.d.ts +5 -0
  16. package/dist/types/hooks/useStateWithDynamicDefault.d.ts +2 -0
  17. package/dist/types/index.d.ts +266 -2
  18. package/dist/types/main.d.ts +19 -0
  19. package/dist/types/midi/ccValues.d.ts +3 -0
  20. package/dist/types/midi/export.d.ts +22 -0
  21. package/dist/types/other/DefaultTooltip.d.ts +10 -0
  22. package/dist/types/other/OctavePlayer.d.ts +20 -0
  23. package/dist/types/other/SVGText.d.ts +17 -0
  24. package/dist/types/other/SoundFontProvider.d.ts +17 -0
  25. package/dist/types/pickers/CCPicker.d.ts +7 -0
  26. package/dist/types/pickers/ChannelMappingPicker.d.ts +14 -0
  27. package/dist/types/pickers/ChannelPicker.d.ts +8 -0
  28. package/dist/types/pickers/Knob.d.ts +12 -0
  29. package/dist/types/pickers/KnobPicker.d.ts +27 -0
  30. package/dist/types/pickers/LatchPicker.d.ts +8 -0
  31. package/dist/types/pickers/MappingPicker.d.ts +11 -0
  32. package/dist/types/pickers/NotePicker.d.ts +20 -0
  33. package/dist/types/pickers/PianoPicker.d.ts +9 -0
  34. package/dist/types/pickers/PolarityPicker.d.ts +14 -0
  35. package/dist/types/pickers/ResponseCurve.d.ts +40 -0
  36. package/dist/types/pickers/ResponseCurvePicker.d.ts +15 -0
  37. package/dist/types/pickers/Select.d.ts +29 -0
  38. package/dist/types/pickers/StatusPicker.d.ts +12 -0
  39. package/dist/types/pickers/ValuePicker.d.ts +15 -0
  40. package/dist/types/pickers/knobSkin10.d.ts +14 -0
  41. package/dist/types/rotaryKnob/InternalInput.d.ts +18 -0
  42. package/dist/types/rotaryKnob/Types.d.ts +5 -0
  43. package/dist/types/rotaryKnob/helpers/DrawCircle.d.ts +18 -0
  44. package/dist/types/rotaryKnob/helpers/DrawLine.d.ts +15 -0
  45. package/dist/types/rotaryKnob/helpers/HelpersOverlay.d.ts +11 -0
  46. package/dist/types/rotaryKnob/helpers/KnobVisualHelpers.d.ts +30 -0
  47. package/dist/types/rotaryKnob/index.d.ts +49 -0
  48. package/dist/types/rotaryKnob/knobdefaultskin.d.ts +6 -0
  49. package/dist/types/rotaryKnob/utils.d.ts +49 -0
  50. package/dist/types/utils.d.ts +9 -0
  51. package/lib/@types/nebiru-react-rotary-knob.d.ts +20 -0
  52. package/lib/@types/react-svgmt.d.ts +74 -0
  53. package/lib/@types/zds-mappings.d.ts +55 -0
  54. package/lib/@types/zds-react-piano.d.ts +17 -0
  55. package/lib/hooks/useComponentSize.ts +52 -0
  56. package/lib/hooks/useStateWithDynamicDefault.ts +13 -0
  57. package/lib/main.ts +34 -0
  58. package/lib/midi/ccValues.ts +139 -0
  59. package/lib/midi/export.ts +54 -0
  60. package/lib/other/DefaultTooltip.ts +14 -0
  61. package/lib/other/OctavePlayer.tsx +141 -0
  62. package/lib/other/SVGText.tsx +221 -0
  63. package/lib/other/SoundFontProvider.tsx +130 -0
  64. package/lib/pickers/CCPicker.tsx +28 -0
  65. package/lib/pickers/ChannelMappingPicker.tsx +135 -0
  66. package/lib/pickers/ChannelPicker.tsx +76 -0
  67. package/lib/pickers/Knob.tsx +93 -0
  68. package/lib/pickers/KnobPicker.tsx +93 -0
  69. package/lib/pickers/LatchPicker.tsx +33 -0
  70. package/lib/pickers/MappingPicker.tsx +68 -0
  71. package/lib/pickers/NotePicker.tsx +95 -0
  72. package/lib/pickers/PianoPicker.tsx +77 -0
  73. package/lib/pickers/PolarityPicker.tsx +39 -0
  74. package/lib/pickers/ResponseCurve.tsx +304 -0
  75. package/lib/pickers/ResponseCurvePicker.tsx +74 -0
  76. package/lib/pickers/Select.tsx +248 -0
  77. package/lib/pickers/StatusPicker.tsx +28 -0
  78. package/lib/pickers/ValuePicker.tsx +67 -0
  79. package/lib/pickers/knobSkin10.tsx +94 -0
  80. package/lib/rotaryKnob/InternalInput.tsx +43 -0
  81. package/lib/rotaryKnob/Types.ts +6 -0
  82. package/lib/rotaryKnob/helpers/DrawCircle.tsx +41 -0
  83. package/lib/rotaryKnob/helpers/DrawLine.tsx +32 -0
  84. package/lib/rotaryKnob/helpers/HelpersOverlay.tsx +43 -0
  85. package/lib/rotaryKnob/helpers/KnobVisualHelpers.tsx +138 -0
  86. package/lib/rotaryKnob/index.tsx +417 -0
  87. package/lib/rotaryKnob/knobdefaultskin.ts +56 -0
  88. package/lib/rotaryKnob/utils.ts +112 -0
  89. package/lib/temp/acoustic_grand_piano-mp3.js +94 -0
  90. package/lib/utils.ts +41 -0
  91. package/package.json +3 -7
  92. package/stories/assets/sampleStyles.css +349 -0
  93. package/stories/assets/utils.js +7 -0
  94. package/stories/picker.stories.tsx +313 -0
  95. package/tsconfig.app.json +26 -0
  96. package/tsconfig.json +34 -0
  97. package/tsconfig.node.json +24 -0
  98. package/vite.config.ts +45 -0
  99. package/dist/index.cjs.js.map +0 -1
  100. package/dist/index.d.ts +0 -244
  101. package/dist/index.es.js.map +0 -1
package/dist/index.d.ts DELETED
@@ -1,244 +0,0 @@
1
- import { default as default_2 } from 'soundfont-player';
2
- import { ForwardRefExoticComponent } from 'react';
3
- import { GroupBase } from 'react-select';
4
- import { JSX as JSX_2 } from 'react/jsx-runtime';
5
- import { JSX as JSX_3 } from 'react';
6
- import { JSXElementConstructor } from 'react';
7
- import { Mapping } from 'zds-mappings';
8
- import { ReactElement } from 'react';
9
- import { ReactNode } from 'react';
10
- import { RefAttributes } from 'react';
11
- import { SelectInstance } from 'react-select';
12
-
13
- export declare const CCPicker: ForwardRefExoticComponent<CCPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
14
-
15
- declare type CCPickerProps = SelectProps<number>;
16
-
17
- export declare const ccValues: Option_2<number>[];
18
-
19
- export declare const ChannelMappingPicker: ForwardRefExoticComponent<ChannelMappingPickerProps & RefAttributes<SelectInstance<Option_2<InternalValue>, false, GroupBase<Option_2<InternalValue>>>>>;
20
-
21
- declare interface ChannelMappingPickerProps extends SelectProps<InternalValue> {
22
- channels: Option_2<number>[];
23
- className?: string;
24
- filterOptions?: (candidate: Option_2<InternalValue>, inputValue: string) => boolean;
25
- value: number;
26
- onChange: (value: InternalValue) => void;
27
- }
28
-
29
- export declare const ChannelPicker: ForwardRefExoticComponent<ChannelPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
30
-
31
- declare type ChannelPickerProps = SelectProps<number>;
32
-
33
- export declare const combineStatusWithChannel: (channel: number, status: Status_2) => number;
34
-
35
- export declare const extractStatusAndChannel: (status: number) => {
36
- status: Status_2;
37
- channel: number;
38
- };
39
-
40
- export declare const getStatusLabel: (val: Status_2) => string | number | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode>;
41
-
42
- declare type InternalValue = number | 'separator';
43
-
44
- export declare const Knob: (props: KnobProps) => JSX_2.Element;
45
-
46
- export declare const KnobPicker: ForwardRefExoticComponent<SelectProps<number> & {
47
- highToLow?: boolean;
48
- includeLabel?: boolean;
49
- includePicker?: boolean;
50
- knobProps?: Partial<KnobPickerProps>;
51
- max?: number;
52
- min?: number;
53
- wheelEnabled?: boolean;
54
- wheelSensitivity?: number;
55
- value: number;
56
- } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
57
-
58
- declare type KnobPickerProps = SelectProps<number> & {
59
- highToLow?: boolean;
60
- includeLabel?: boolean;
61
- includePicker?: boolean;
62
- knobProps?: Partial<KnobPickerProps>;
63
- max?: number;
64
- min?: number;
65
- wheelEnabled?: boolean;
66
- wheelSensitivity?: number;
67
- value: number;
68
- };
69
-
70
- declare type KnobProps = {
71
- disabled?: boolean;
72
- max?: number;
73
- min?: number;
74
- onChange?: (value: number) => void;
75
- value?: number;
76
- wheelEnabled?: boolean;
77
- wheelSensitivity?: number;
78
- };
79
-
80
- export declare const LatchPicker: ForwardRefExoticComponent<LatchPickerProps & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
81
-
82
- declare type LatchPickerProps = SelectProps<number>;
83
-
84
- export declare const MappingPicker: ForwardRefExoticComponent<SelectProps<string> & {
85
- allowClearing: boolean;
86
- } & RefAttributes<SelectInstance<Option_2<string>, false, GroupBase<Option_2<string>>>>>;
87
-
88
- export declare const MASK_CHANNEL = 15;
89
-
90
- export declare const MASK_STATUS = 240;
91
-
92
- export declare const NotePicker: ForwardRefExoticComponent<SelectProps<number> & {
93
- channel: number;
94
- disabled?: boolean;
95
- isMelodicMode?: boolean;
96
- mapping?: Mapping;
97
- onChange: (value: number) => void;
98
- } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
99
-
100
- export declare const OctavePlayer: ({ format, height, hostname, instrumentName, octave, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, Tooltip, width, }: WithProviderProps) => JSX_2.Element;
101
-
102
- declare type Option_2<T> = {
103
- label: React.ReactNode;
104
- value: T;
105
- };
106
-
107
- export declare const PianoPicker: ({ format, height, hostname, instrumentName, onChange, onClick, onDoubleClick, onKeyMouseEnter, onKeyMouseLeave, soundfont, width, }: WithProviderProps) => JSX_2.Element;
108
-
109
- export declare const PolarityPicker: ForwardRefExoticComponent<SelectProps<number> & {
110
- labelOff?: string;
111
- labelOn?: string;
112
- } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
113
-
114
- export declare const RESPONSE_CURVES: Option_2<number>[];
115
-
116
- export declare type ResponseCurve = {
117
- value: string | number;
118
- label: React.ReactNode;
119
- c1: number;
120
- c2: number;
121
- x1: number;
122
- y1: number;
123
- x2: number;
124
- y2: number;
125
- labelX: number;
126
- labelY: number;
127
- };
128
-
129
- export declare const ResponseCurve: (props: ResponseCurveProps) => JSX_2.Element;
130
-
131
- export declare const ResponseCurvePicker: ForwardRefExoticComponent<SelectProps<number> & {
132
- inverted?: boolean;
133
- Tooltip?: React.FC<TooltipProps>;
134
- } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
135
-
136
- declare type ResponseCurveProps = {
137
- autosize: boolean;
138
- disabled?: boolean;
139
- inverted: boolean;
140
- onChange: (event: {
141
- target: {
142
- value: number;
143
- };
144
- }) => void;
145
- Tooltip: React.FC<TooltipProps>;
146
- value: number;
147
- };
148
-
149
- export declare const Select: <T>(props: SelectProps<T> & {
150
- ref?: React.ForwardedRef<SelectInstance<Option_2<T>, false, GroupBase<Option_2<T>>>>;
151
- }) => JSX_3.Element;
152
-
153
- declare type SelectProps<T> = {
154
- className?: string;
155
- components?: object;
156
- disabled?: boolean;
157
- filterOptions?: (candidate: Option_2<T>, inputValue: string) => boolean;
158
- formatOptionLabel?: (option: Option_2<unknown>, { context }: {
159
- context: 'menu' | 'value';
160
- }) => React.ReactNode;
161
- isSearchable?: boolean;
162
- label?: string;
163
- onChange: (value: Option_2<T>['value']) => void;
164
- options: Option_2<T>[] | {
165
- entries: Option_2<T>[];
166
- }[];
167
- preserveMenuWidth?: boolean;
168
- shrinkLabel?: boolean;
169
- value: Option_2<T>['value'];
170
- };
171
-
172
- declare type Status = (typeof Statuses_2)[keyof typeof Statuses_2]
173
-
174
- declare type Status_2 = (typeof Statuses)[keyof typeof Statuses];
175
-
176
- export declare const Statuses: {
177
- noteOff: number;
178
- noteOn: number;
179
- aftertouch: number;
180
- controlChange: number;
181
- programChange: number;
182
- channelPressure: number;
183
- pitchWheel: number;
184
- };
185
-
186
- declare const Statuses_2 = {
187
- noteOff: 8, // 1000
188
- noteOn: 9, // 1001
189
- aftertouch: 10, // 1010
190
- controlChange: 11, // 1011
191
- programChange: 12, // 1100
192
- channelPressure: 13, // 1101
193
- pitchWheel: 14, // 1110
194
- };
195
-
196
- export declare const StatusPicker: ForwardRefExoticComponent<SelectProps<number> & {
197
- statuses: Option_2<Status>[];
198
- } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
199
-
200
- export declare const SVGText: (props: TextProps) => JSX_2.Element;
201
-
202
- declare type TextProps = Partial<HTMLOrSVGElement> & {
203
- className?: string;
204
- dx?: number;
205
- dy?: number;
206
- maxHeight?: number;
207
- maxWidth?: number;
208
- transform?: string;
209
- text: string;
210
- textAnchor?: React.CSSProperties['textAnchor'];
211
- verticalAnchor?: 'start' | 'middle' | 'end';
212
- x?: number;
213
- y?: number;
214
- };
215
-
216
- declare type TooltipProps = {
217
- children?: React.ReactNode;
218
- placement?: 'left' | 'right' | 'top' | 'bottom';
219
- title: React.ReactNode;
220
- };
221
-
222
- export declare const ValuePicker: ForwardRefExoticComponent<SelectProps<number> & {
223
- highToLow?: boolean;
224
- max?: number;
225
- min?: number;
226
- } & RefAttributes<SelectInstance<Option_2<number>, false, GroupBase<Option_2<number>>>>>;
227
-
228
- declare type WithProviderProps = {
229
- format?: 'mp3' | 'ogg';
230
- height: number;
231
- hostname?: string;
232
- instrumentName: default_2.InstrumentName;
233
- octave?: number;
234
- onChange?: (note: number) => void;
235
- onClick?: (note: number) => void;
236
- onDoubleClick?: (note: number) => void;
237
- onKeyMouseEnter?: (note: number) => void;
238
- onKeyMouseLeave?: (note: number) => void;
239
- soundfont?: 'MusyngKite' | 'FluidR3_GM';
240
- Tooltip?: TooltipProps;
241
- width: number;
242
- };
243
-
244
- export { }