zds-pickers 4.0.25 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.25",
+  "version": "4.1.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -28,16 +28,6 @@
     "type": "git",
     "url": "git+https://github.com/dkadrios/zds-pickers.git"
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build && tsc",
-    "build-storybook": "storybook build",
-    "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": {
     "@biomejs/biome": "1.9.4",
     "@storybook/addon-actions": "8.6.3",
@@ -71,8 +61,8 @@
     "d3-selection": "3.0.0",
     "react-svgmt": "2.0.2",
     "soundfont-player": "0.12.0",
-    "tonal": "6.4.0",
-    "zds-react-piano": "4.0.10"
+    "tonal": "6.4.2",
+    "zds-react-piano": "4.1.0"
   },
   "peerDependencies": {
     "classnames": ">=2.5.1",
@@ -80,5 +70,15 @@
     "react-dom": ">=18.0.0",
     "react-select": ">=5.10.0",
     "zds-mappings": "1.4.9"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc",
+    "build-storybook": "storybook build",
+    "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"
   }
 }

package/stories/assets/sampleStyles.css

@@ -347,3 +347,19 @@ body .response-curve-picker text.button-selected {
   color: #f8e8d5;
 }
 
+/*
+ * Styles of "selected" keys (persistent selection state)
+ */
+.ReactPiano__Key--selected {
+  background: #ff6b35;
+}
+
+.ReactPiano__Key--selected.ReactPiano__Key--accidental {
+  border: 1px solid #fff;
+  border-top: 1px solid #ff6b35;
+}
+
+.ReactPiano__Key--selected.ReactPiano__Key--natural {
+  border: 1px solid #ff6b35;
+}
+

package/stories/picker.stories.tsx

@@ -8,6 +8,7 @@ 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 { KeyPicker } from '../lib/pickers/KeyPicker'
 import { Knob } from '../lib/pickers/Knob'
 import { KnobPicker } from '../lib/pickers/KnobPicker'
 import { LatchPicker } from '../lib/pickers/LatchPicker'
@@ -16,7 +17,6 @@ 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 { KeyPicker } from '../lib/pickers/KeyPicker'
 import { ResponseCurvePicker } from '../lib/pickers/ResponseCurvePicker'
 import {
   type Option,
@@ -134,18 +134,30 @@ const ChannelMappingPickerUndefinedStory: StoryObj<
 }
 
 const KeyPickerStory: StoryObj<typeof KeyPicker> = {
-  render: args => <KeyPicker {...args} />,
+  render: (args) => <KeyPicker {...args} />,
+  args: {
+    instrumentName: 'acoustic_grand_piano',
+    height: 100,
+    width: 200,
+    octave: 4,
+    value: 65,
+  },
+}
+
+const KeyPickerUndefinedStory: StoryObj<typeof KeyPicker> = {
+  render: (args) => <KeyPicker {...args} />,
   args: {
     instrumentName: 'acoustic_grand_piano',
     height: 100,
     width: 200,
     octave: 4,
+    value: noSelection,
   },
 }
 
 
 const KnobStory: StoryObj<typeof Knob> = {
-  render: args => <Knob {...args} />,
+  render: (args) => <Knob {...args} />,
   args: {
     disabled: false,
     max: 127,
@@ -156,7 +168,7 @@ const KnobStory: StoryObj<typeof Knob> = {
 }
 
 const KnobPickerStory: StoryObj<typeof KnobPicker> = {
-  render: args => <KnobPicker {...args} />,
+  render: (args) => <KnobPicker {...args} />,
   args: {
     disabled: false,
     includePicker: true,
@@ -171,7 +183,7 @@ const KnobPickerStory: StoryObj<typeof KnobPicker> = {
 }
 
 const LatchPickerStory: StoryObj<typeof LatchPicker> = {
-  render: args => <LatchPicker {...args} />,
+  render: (args) => <LatchPicker {...args} />,
   args: {
     disabled: false,
     label: 'Mode',
@@ -181,7 +193,7 @@ const LatchPickerStory: StoryObj<typeof LatchPicker> = {
 }
 
 const MappingPickerStory: StoryObj<typeof MappingPicker> = {
-  render: args => <MappingPicker {...args} />,
+  render: (args) => <MappingPicker {...args} />,
   args: {
     allowClearing: true,
     disabled: false,
@@ -193,7 +205,7 @@ const MappingPickerStory: StoryObj<typeof MappingPicker> = {
 }
 
 const NotePickerStory1: StoryObj<typeof NotePicker> = {
-  render: args => <NotePicker {...args} />,
+  render: (args) => <NotePicker {...args} />,
   args: {
     channel: 0,
     disabled: false,
@@ -206,7 +218,7 @@ const NotePickerStory1: StoryObj<typeof NotePicker> = {
 }
 
 const NotePickerStory2: StoryObj<typeof NotePicker> = {
-  render: args => <NotePicker {...args} />,
+  render: (args) => <NotePicker {...args} />,
   args: {
     channel: 0,
     disabled: false,
@@ -218,7 +230,7 @@ const NotePickerStory2: StoryObj<typeof NotePicker> = {
 }
 
 const NotePickerStory3: StoryObj<typeof NotePicker> = {
-  render: args => <NotePicker {...args} />,
+  render: (args) => <NotePicker {...args} />,
   args: {
     channel: 0,
     disabled: false,
@@ -230,7 +242,8 @@ const NotePickerStory3: StoryObj<typeof NotePicker> = {
         type="button"
         onClick={() => {
           window.alert('click')
-        }}>
+        }}
+      >
         ?
       </button>
     ),
@@ -240,7 +253,7 @@ const NotePickerStory3: StoryObj<typeof NotePicker> = {
 }
 
 const NotePickerStory4: StoryObj<typeof NotePicker> = {
-  render: args => <NotePicker {...args} />,
+  render: (args) => <NotePicker {...args} />,
   args: {
     channel: 0,
     disabled: false,
@@ -253,7 +266,7 @@ const NotePickerStory4: StoryObj<typeof NotePicker> = {
 }
 
 const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
-  render: args => <OctavePlayer {...args} />,
+  render: (args) => <OctavePlayer {...args} />,
   args: {
     instrumentName: 'acoustic_grand_piano',
     height: 100,
@@ -263,16 +276,27 @@ const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
 }
 
 const PianoPickerStory: StoryObj<typeof PianoPicker> = {
-  render: args => <PianoPicker {...args} />,
+  render: (args) => <PianoPicker {...args} />,
+  args: {
+    instrumentName: 'acoustic_grand_piano',
+    height: 100,
+    width: 1000,
+    selectedNotes: [65], // F4 selected
+  },
+}
+
+const PianoPickerNoSelectionStory: StoryObj<typeof PianoPicker> = {
+  render: (args) => <PianoPicker {...args} />,
   args: {
     instrumentName: 'acoustic_grand_piano',
     height: 100,
     width: 1000,
+    selectedNotes: [], // No selection
   },
 }
 
 const PolarityPickerStory: StoryObj<typeof PolarityPicker> = {
-  render: args => <PolarityPicker {...args} />,
+  render: (args) => <PolarityPicker {...args} />,
   args: {
     disabled: false,
     label: 'Polarity',
@@ -284,7 +308,7 @@ const PolarityPickerStory: StoryObj<typeof PolarityPicker> = {
 }
 
 const PolarityPickerUndefinedStory: StoryObj<typeof PolarityPicker> = {
-  render: args => <PolarityPicker {...args} />,
+  render: (args) => <PolarityPicker {...args} />,
   args: {
     disabled: false,
     label: 'Polarity',
@@ -296,7 +320,7 @@ const PolarityPickerUndefinedStory: StoryObj<typeof PolarityPicker> = {
 }
 
 const ResponseCurveStory: StoryObj<typeof ResponseCurve> = {
-  render: args => <ResponseCurve {...args} />,
+  render: (args) => <ResponseCurve {...args} />,
   args: {
     disabled: false,
     inverted: false,
@@ -305,7 +329,7 @@ const ResponseCurveStory: StoryObj<typeof ResponseCurve> = {
 }
 
 const ResponseCurvePickerStory: StoryObj<typeof ResponseCurvePicker> = {
-  render: args => <ResponseCurvePicker {...args} />,
+  render: (args) => <ResponseCurvePicker {...args} />,
   args: {
     disabled: false,
     inverted: false,
@@ -317,7 +341,7 @@ const ResponseCurvePickerStory: StoryObj<typeof ResponseCurvePicker> = {
 
 const ResponseCurvePickerUndefinedStory: StoryObj<typeof ResponseCurvePicker> =
   {
-    render: args => <ResponseCurvePicker {...args} />,
+    render: (args) => <ResponseCurvePicker {...args} />,
     args: {
       disabled: false,
       inverted: false,
@@ -328,7 +352,7 @@ const ResponseCurvePickerUndefinedStory: StoryObj<typeof ResponseCurvePicker> =
   }
 
 const StatusPickerStory: StoryObj<typeof StatusPicker> = {
-  render: args => <StatusPicker {...args} />,
+  render: (args) => <StatusPicker {...args} />,
   args: {
     disabled: false,
     label: 'Status Msg',
@@ -339,7 +363,7 @@ const StatusPickerStory: StoryObj<typeof StatusPicker> = {
 }
 
 const StatusPickerUndefinedStory: StoryObj<typeof StatusPicker> = {
-  render: args => <StatusPicker {...args} />,
+  render: (args) => <StatusPicker {...args} />,
   args: {
     disabled: false,
     label: 'Status Msg',
@@ -350,7 +374,7 @@ const StatusPickerUndefinedStory: StoryObj<typeof StatusPicker> = {
 }
 
 const ValuePickerStory: StoryObj<typeof ValuePicker> = {
-  render: args => <ValuePicker {...args} />,
+  render: (args) => <ValuePicker {...args} />,
   args: {
     disabled: false,
     highToLow: false,
@@ -362,7 +386,7 @@ const ValuePickerStory: StoryObj<typeof ValuePicker> = {
 }
 
 const ValuePickerUndefinedStory: StoryObj<typeof ValuePicker> = {
-  render: args => <ValuePicker {...args} />,
+  render: (args) => <ValuePicker {...args} />,
   args: {
     disabled: false,
     highToLow: false,
@@ -382,6 +406,7 @@ export {
   CCPickerStory as ChangeController,
   CCPickerUndefinedStory as ChangeControllerNoValue,
   KeyPickerStory as KeyPicker,
+  KeyPickerUndefinedStory as KeyPickerNoValue,
   KnobStory as Knob,
   KnobPickerStory as KnobPicker,
   LatchPickerStory as LatchPicker,
@@ -392,6 +417,7 @@ export {
   NotePickerStory4 as NotePickerNoValue,
   OctavePlayerStory as OctavePlayer,
   PianoPickerStory as PianoPicker,
+  PianoPickerNoSelectionStory as PianoPickerNoSelection,
   PolarityPickerStory as PolarityPicker,
   PolarityPickerUndefinedStory as PolarityPickerNoValue,
   ResponseCurveStory as ResponseCurve,

package/vite.config.ts

@@ -14,17 +14,26 @@ export default defineConfig({
     outDir: 'dist',
     sourcemap: true,
     rollupOptions: {
-      external: [
-        'react',
-        'react-dom',
-        'react/jsx-runtime',
-        'react-select',
-        'd3-drag',
-        'd3-scale',
-        'd3-selection',
-      ],
+      external: id => {
+        return [
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          'react-select',
+          'd3-drag',
+          'd3-scale',
+          'd3-selection',
+          'classnames',
+          'zds-mappings',
+        ].some(pkg => id === pkg || id.startsWith(`${pkg}/`))
+      },
       output: {
         exports: 'named',
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-select': 'ReactSelect',
+        },
       },
     },
     // minify: true,