zds-pickers 4.1.0 → 4.1.3

package/stories/picker.stories.tsx

@@ -1,432 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-// biome-ignore lint/correctness/noUnusedImports: <explanation>
-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 { KeyPicker } from '../lib/pickers/KeyPicker'
-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 {
-  type Option,
-  noSelection,
-  noSelectionOption,
-} from '../lib/pickers/Select'
-import { StatusPicker } from '../lib/pickers/StatusPicker'
-import { ValuePicker } from '../lib/pickers/ValuePicker'
-
-const meta: Meta = {
-  title: 'Pickers',
-}
-
-const gmMapping = getMapping('General MIDI')
-
-const CCPickerStory: StoryObj<typeof CCPicker> = {
-  render: args => <CCPicker {...args} />,
-  args: {
-    disabled: false,
-    label: 'CC #',
-    shrinkLabel: false,
-    value: 7,
-  },
-}
-
-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: {
-    disabled: false,
-    label: 'Channel',
-    shrinkLabel: false,
-    value: 9,
-  },
-}
-
-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: {
-    channels: [
-      '',
-      'No Mapping',
-      '',
-      'Alesis DM Pro',
-      '',
-      '',
-      '',
-      'BFD3',
-      '',
-      '',
-      'Roland TD-20',
-      'Roland TD-30 Perc 1 (Latin)',
-      '',
-      '',
-      '',
-      '',
-    ].map((label, value) => ({ label, value })),
-    disabled: false,
-    label: 'Channel',
-    shrinkLabel: false,
-    value: 7,
-  },
-}
-
-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 KeyPickerStory: StoryObj<typeof KeyPicker> = {
-  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} />,
-  args: {
-    disabled: false,
-    max: 127,
-    min: 0,
-    value: 45,
-    wheelEnabled: false,
-  },
-}
-
-const KnobPickerStory: StoryObj<typeof KnobPicker> = {
-  render: (args) => <KnobPicker {...args} />,
-  args: {
-    disabled: false,
-    includePicker: true,
-    label: 'Sensitivity',
-    max: 127,
-    min: 0,
-    shrinkLabel: false,
-    // size: 35,
-    value: 87,
-    wheelEnabled: false,
-  },
-}
-
-const LatchPickerStory: StoryObj<typeof LatchPicker> = {
-  render: (args) => <LatchPicker {...args} />,
-  args: {
-    disabled: false,
-    label: 'Mode',
-    shrinkLabel: false,
-    value: 0,
-  },
-}
-
-const MappingPickerStory: StoryObj<typeof MappingPicker> = {
-  render: (args) => <MappingPicker {...args} />,
-  args: {
-    allowClearing: true,
-    disabled: false,
-    label: 'Mapping',
-    preserveMenuWidth: false,
-    shrinkLabel: false,
-    value: 'EZDrummer',
-  },
-}
-
-const NotePickerStory1: StoryObj<typeof NotePicker> = {
-  render: (args) => <NotePicker {...args} />,
-  args: {
-    channel: 0,
-    disabled: false,
-    isMelodicMode: false,
-    label: 'Note #',
-    mapping: gmMapping,
-    shrinkLabel: false,
-    value: 38,
-  },
-}
-
-const NotePickerStory2: StoryObj<typeof NotePicker> = {
-  render: (args) => <NotePicker {...args} />,
-  args: {
-    channel: 0,
-    disabled: false,
-    isMelodicMode: false,
-    label: 'No mapping',
-    shrinkLabel: false,
-    value: 38,
-  },
-}
-
-const NotePickerStory3: StoryObj<typeof NotePicker> = {
-  render: (args) => <NotePicker {...args} />,
-  args: {
-    channel: 0,
-    disabled: false,
-    isMelodicMode: false,
-    label: 'Action button',
-    mapping: gmMapping,
-    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: {
-    instrumentName: 'acoustic_grand_piano',
-    height: 100,
-    width: 200,
-    octave: 4,
-  },
-}
-
-const PianoPickerStory: StoryObj<typeof PianoPicker> = {
-  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} />,
-  args: {
-    disabled: false,
-    label: 'Polarity',
-    labelOff: 'Normally Off',
-    labelOn: 'Normally On',
-    shrinkLabel: false,
-    value: 0,
-  },
-}
-
-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: {
-    disabled: false,
-    inverted: false,
-    value: 0,
-  },
-}
-
-const ResponseCurvePickerStory: StoryObj<typeof ResponseCurvePicker> = {
-  render: (args) => <ResponseCurvePicker {...args} />,
-  args: {
-    disabled: false,
-    inverted: false,
-    label: 'Response',
-    shrinkLabel: false,
-    value: 0,
-  },
-}
-
-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: {
-    disabled: false,
-    label: 'Status Msg',
-    shrinkLabel: false,
-    statuses: statusOptions,
-    value: Statuses.noteOn,
-  },
-}
-
-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: {
-    disabled: false,
-    highToLow: false,
-    label: 'Value',
-    max: 127,
-    min: 0,
-    shrinkLabel: false,
-  },
-}
-
-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,
-  ChannelMappingPickerUndefinedStory as ChannelMappingPickerNoValue,
-  CCPickerStory as ChangeController,
-  CCPickerUndefinedStory as ChangeControllerNoValue,
-  KeyPickerStory as KeyPicker,
-  KeyPickerUndefinedStory as KeyPickerNoValue,
-  KnobStory as Knob,
-  KnobPickerStory as KnobPicker,
-  LatchPickerStory as LatchPicker,
-  MappingPickerStory as MappingPicker,
-  NotePickerStory1 as NotePickerSimple,
-  NotePickerStory2 as NotePickerNoMapping,
-  NotePickerStory3 as NotePickerActionButton,
-  NotePickerStory4 as NotePickerNoValue,
-  OctavePlayerStory as OctavePlayer,
-  PianoPickerStory as PianoPicker,
-  PianoPickerNoSelectionStory as PianoPickerNoSelection,
-  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

package/tsconfig.json

@@ -1,35 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* output */
-    "declaration": true,
-    "declarationDir": "./dist/types",
-    "emitDeclarationOnly": false,
-    "outDir": "./dist",
-    // "preserveConstEnums": true, // we don't use enums
-
-    /* Bundler mode */
-    "moduleResolution": "Bundler",
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-
-    // "paths": {}
-  },
-  "include": ["lib"],
-  "exclude": ["node_modules", "**/*.spec.ts", "**/*.spec.tsx", "stories"]
-}

package/vite.config.ts

@@ -1,41 +0,0 @@
-import { resolve } from 'node:path'
-import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
-  plugins: [react()],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'lib/index'),
-      fileName: format => `index.${format}.js`,
-      formats: ['es', 'cjs'],
-      name: 'zds-pickers',
-    },
-    outDir: 'dist',
-    sourcemap: true,
-    rollupOptions: {
-      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,
-  },
-})