zds-pickers 4.0.20 → 4.0.22

package/lib/pickers/Select.tsx

@@ -19,6 +19,8 @@ import ReactSelect, {
 } from 'react-select'
 import { omit } from '../utils'
 
+const noSelection = 255
+
 const { IndicatorsContainer, Placeholder, ValueContainer } = originalComponents
 
 type PassedSelectProps = {
@@ -32,6 +34,11 @@ type Option<T> = {
   value: T
 }
 
+const noSelectionOption: Option<number> = {
+  label: '--',
+  value: noSelection,
+}
+
 interface CustomIndicatorsContainerProps<T>
   extends Omit<IndicatorsContainerProps<Option<T>, false>, 'selectProps'> {
   children: React.ReactNode
@@ -39,10 +46,10 @@ interface CustomIndicatorsContainerProps<T>
     PassedSelectProps
 }
 
-const CustomIndicatorsContainer = <T,>({
-  children,
-  ...rest
-}: CustomIndicatorsContainerProps<T>) => {
+const CustomIndicatorsContainer = <T,>(
+  props: CustomIndicatorsContainerProps<T>,
+) => {
+  const { children, ...rest } = props
   const actionButton = rest.selectProps?.actionButton
 
   return (
@@ -92,6 +99,7 @@ type SelectProps<T> = SelectComponentsConfig<
   false,
   GroupBase<Option<T>>
 > & {
+  actionButton?: React.ReactNode
   className?: string
   components?: object
   disabled?: boolean
@@ -110,7 +118,7 @@ type SelectProps<T> = SelectComponentsConfig<
   preserveMenuWidth?: boolean
   selectProps?: PassedSelectProps
   shrinkLabel?: boolean
-  value: Option<T>['value']
+  value?: Option<T>['value']
 }
 
 const Select = forwardRef(
@@ -255,6 +263,6 @@ const Select = forwardRef(
   },
 ) => JSX.Element
 
-export { Select }
+export { noSelection, noSelectionOption, Select }
 
 export type { Option, SelectProps }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zds-pickers",
-  "version": "4.0.20",
+  "version": "4.0.22",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/types/index.d.ts",
@@ -60,6 +60,7 @@
     "prop-types": "15.8.1",
     "react-dom": "18.2.0",
     "react": "18.2.0",
+    "rc-slider": "11.1.8",
     "storybook": "8.5.0",
     "typescript": "5.7.3",
     "vite": "6.0.7",

package/stories/picker.stories.tsx

@@ -17,6 +17,11 @@ 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 {
+  type Option,
+  noSelection,
+  noSelectionOption,
+} from '../lib/pickers/Select'
 import { StatusPicker } from '../lib/pickers/StatusPicker'
 import { ValuePicker } from '../lib/pickers/ValuePicker'
 
@@ -36,6 +41,16 @@ const CCPickerStory: StoryObj<typeof CCPicker> = {
   },
 }
 
+const CCPickerUndefinedStory: StoryObj<typeof CCPicker> = {
+  render: args => <CCPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'CC #',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const ChannelPickerStory: StoryObj<typeof ChannelPicker> = {
   render: args => <ChannelPicker {...args} />,
   args: {
@@ -46,6 +61,16 @@ const ChannelPickerStory: StoryObj<typeof ChannelPicker> = {
   },
 }
 
+const ChannelPickerUndefinedStory: StoryObj<typeof ChannelPicker> = {
+  render: args => <ChannelPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Channel',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const ChannelMappingPickerStory: StoryObj<typeof ChannelMappingPicker> = {
   render: args => <ChannelMappingPicker {...args} />,
   args: {
@@ -74,6 +99,39 @@ const ChannelMappingPickerStory: StoryObj<typeof ChannelMappingPicker> = {
   },
 }
 
+const ChannelMappingPickerUndefinedStory: StoryObj<
+  typeof ChannelMappingPicker
+> = {
+  render: args => <ChannelMappingPicker {...args} />,
+  args: {
+    channels: [
+      ...[
+        '',
+        'No Mapping',
+        '',
+        'Alesis DM Pro',
+        '',
+        '',
+        '',
+        'BFD3',
+        '',
+        '',
+        'Roland TD-20',
+        'Roland TD-30 Perc 1 (Latin)',
+        '',
+        '',
+        '',
+        '',
+      ].map((label, value): Option<number> => ({ label, value })),
+      noSelectionOption,
+    ],
+    disabled: false,
+    label: 'Channel',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const KnobStory: StoryObj<typeof Knob> = {
   render: args => <Knob {...args} />,
   args: {
@@ -155,22 +213,33 @@ const NotePickerStory3: StoryObj<typeof NotePicker> = {
     isMelodicMode: false,
     label: 'Action button',
     mapping: gmMapping,
-    selectProps: {
-      actionButton: (
-        <button
-          type="button"
-          onClick={() => {
-            window.alert('click')
-          }}>
-          ?
-        </button>
-      ),
-    },
+    actionButton: (
+      <button
+        type="button"
+        onClick={() => {
+          window.alert('click')
+        }}>
+        ?
+      </button>
+    ),
     shrinkLabel: false,
     value: 38,
   },
 }
 
+const NotePickerStory4: StoryObj<typeof NotePicker> = {
+  render: args => <NotePicker {...args} />,
+  args: {
+    channel: 0,
+    disabled: false,
+    isMelodicMode: false,
+    label: 'Note #',
+    mapping: gmMapping,
+    shrinkLabel: false,
+    value: undefined,
+  },
+}
+
 const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
   render: args => <OctavePlayer {...args} />,
   args: {
@@ -184,49 +253,6 @@ const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
   },
 }
 
-// # NotePicker
-// <Canvas withToolbar>
-//   <Story
-//     height={120}
-//     name="NotePicker"
-//   >
-//     <NotePicker
-//       channel={number('channel', 0, 'NotePicker')}
-//       disabled={boolean('disabled', false, 'NotePicker')}
-//       isMelodicMode={boolean('isMelodicMode', false, 'NotePicker')}
-//       label={text('label', 'Note #', 'NotePicker')}
-//       mapping={gmMapping}
-//       onChange={action('handleChange')}
-//       shrinkLabel={boolean('shrinkLabel', false, 'NotePicker')}
-//       value={number('value', 38, {}, 'NotePicker')}
-//     />
-//     <br />
-//     <NotePicker
-//       channel={number('channel', 0, 'NotePicker2')}
-//       disabled={boolean('disabled', false, 'NotePicker2')}
-//       isMelodicMode={boolean('isMelodicMode', false, 'NotePicker2')}
-//       label="No mapping"
-//       onChange={action('handleChange2')}
-//       shrinkLabel={boolean('shrinkLabel', false, 'NotePicker')}
-//       value={number('value', 38, {}, 'NotePicker2')}
-//     />
-//     <br />
-//     <NotePicker
-//       channel={number('channel', 0, 'NotePicker3')}
-//       disabled={boolean('disabled', false, 'NotePicker3')}
-//       isMelodicMode={boolean('isMelodicMode', false, 'NotePicker3')}
-//       label="Action button"
-//       mapping={gmMapping}
-//       onChange={action('handleChange3')}
-//       selectProps={{actionButton:<button onClick={e=>{
-//         console.log('click')
-//         }}>?</button>}}
-//       shrinkLabel={boolean('shrinkLabel', false, 'NotePicker')}
-//       value={number('value', 38, {}, 'NotePicker3')}
-//     />
-//   </Story>
-// </Canvas>
-
 const PianoPickerStory: StoryObj<typeof PianoPicker> = {
   render: args => <PianoPicker {...args} />,
   args: {
@@ -248,6 +274,18 @@ const PolarityPickerStory: StoryObj<typeof PolarityPicker> = {
   },
 }
 
+const PolarityPickerUndefinedStory: StoryObj<typeof PolarityPicker> = {
+  render: args => <PolarityPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Polarity',
+    labelOff: 'Normally Off',
+    labelOn: 'Normally On',
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 const ResponseCurveStory: StoryObj<typeof ResponseCurve> = {
   render: args => <ResponseCurve {...args} />,
   args: {
@@ -268,6 +306,18 @@ const ResponseCurvePickerStory: StoryObj<typeof ResponseCurvePicker> = {
   },
 }
 
+const ResponseCurvePickerUndefinedStory: StoryObj<typeof ResponseCurvePicker> =
+  {
+    render: args => <ResponseCurvePicker {...args} />,
+    args: {
+      disabled: false,
+      inverted: false,
+      label: 'Response',
+      shrinkLabel: false,
+      value: noSelection,
+    },
+  }
+
 const StatusPickerStory: StoryObj<typeof StatusPicker> = {
   render: args => <StatusPicker {...args} />,
   args: {
@@ -279,6 +329,17 @@ const StatusPickerStory: StoryObj<typeof StatusPicker> = {
   },
 }
 
+const StatusPickerUndefinedStory: StoryObj<typeof StatusPicker> = {
+  render: args => <StatusPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Status Msg',
+    shrinkLabel: false,
+    statuses: statusOptions,
+    value: noSelection,
+  },
+}
+
 const ValuePickerStory: StoryObj<typeof ValuePicker> = {
   render: args => <ValuePicker {...args} />,
   args: {
@@ -291,10 +352,26 @@ const ValuePickerStory: StoryObj<typeof ValuePicker> = {
   },
 }
 
+const ValuePickerUndefinedStory: StoryObj<typeof ValuePicker> = {
+  render: args => <ValuePicker {...args} />,
+  args: {
+    disabled: false,
+    highToLow: false,
+    label: 'Value',
+    max: 127,
+    min: 0,
+    shrinkLabel: false,
+    value: noSelection,
+  },
+}
+
 export {
   ChannelPickerStory as ChannelPicker,
+  ChannelPickerUndefinedStory as ChannelPickerNoValue,
   ChannelMappingPickerStory as ChannelMappingPicker,
-  CCPickerStory as ContinuousChangePicker,
+  ChannelMappingPickerUndefinedStory as ChannelMappingPickerNoValue,
+  CCPickerStory as ChangeController,
+  CCPickerUndefinedStory as ChangeControllerNoValue,
   KnobStory as Knob,
   KnobPickerStory as KnobPicker,
   LatchPickerStory as LatchPicker,
@@ -302,13 +379,18 @@ export {
   NotePickerStory1 as NotePickerSimple,
   NotePickerStory2 as NotePickerNoMapping,
   NotePickerStory3 as NotePickerActionButton,
+  NotePickerStory4 as NotePickerNoValue,
   OctavePlayerStory as OctavePlayer,
   PianoPickerStory as PianoPicker,
   PolarityPickerStory as PolarityPicker,
+  PolarityPickerUndefinedStory as PolarityPickerNoValue,
   ResponseCurveStory as ResponseCurve,
   ResponseCurvePickerStory as ResponseCurvePicker,
+  ResponseCurvePickerUndefinedStory as ResponseCurvePickerNoValue,
   StatusPickerStory as StatusPicker,
+  StatusPickerUndefinedStory as StatusPickerNoValue,
   ValuePickerStory as ValuePicker,
+  ValuePickerUndefinedStory as ValuePickerNoValue,
 }
 
 export default meta