zds-pickers 4.0.5 → 4.0.6

package/stories/picker.stories.tsx

@@ -0,0 +1,313 @@
+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 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 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 ChannelPickerStory: StoryObj<typeof ChannelPicker> = {
+  render: args => <ChannelPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Channel',
+    shrinkLabel: false,
+    value: 9,
+  },
+}
+
+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 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,
+    // selectProps: {
+    //   actionButton: (
+    //     <button
+    //       onClick={e => {
+    //         window.alert('click')
+    //       }}>
+    //       ?
+    //     </button>
+    //   ),
+    // },
+    shrinkLabel: false,
+    value: 38,
+  },
+}
+
+const OctavePlayerStory: StoryObj<typeof OctavePlayer> = {
+  render: args => <OctavePlayer {...args} />,
+  args: {
+    instrumentName: {
+      control: { type: 'select' },
+      options: [undefined, 'acoustic_grand_piano'],
+    } as unknown as Soundfont.InstrumentName,
+    height: 100,
+    width: 200,
+    octave: 4,
+  },
+}
+
+// # 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: {
+    instrumentName: 'acoustic_grand_piano',
+    height: 100,
+    width: 1000,
+  },
+}
+
+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 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 StatusPickerStory: StoryObj<typeof StatusPicker> = {
+  render: args => <StatusPicker {...args} />,
+  args: {
+    disabled: false,
+    label: 'Status Msg',
+    shrinkLabel: false,
+    statuses: statusOptions,
+    value: Statuses.noteOn,
+  },
+}
+
+const ValuePickerStory: StoryObj<typeof ValuePicker> = {
+  render: args => <ValuePicker {...args} />,
+  args: {
+    disabled: false,
+    highToLow: false,
+    label: 'Value',
+    max: 127,
+    min: 0,
+    shrinkLabel: false,
+  },
+}
+
+export {
+  ChannelPickerStory as ChannelPicker,
+  ChannelMappingPickerStory as ChannelMappingPicker,
+  CCPickerStory as ContinuousChangePicker,
+  KnobStory as Knob,
+  KnobPickerStory as KnobPicker,
+  LatchPickerStory as LatchPicker,
+  MappingPickerStory as MappingPicker,
+  NotePickerStory1 as NotePickerSimple,
+  NotePickerStory2 as NotePickerNoMapping,
+  NotePickerStory3 as NotePickerActionButton,
+  OctavePlayerStory as OctavePlayer,
+  PianoPickerStory as PianoPicker,
+  PolarityPickerStory as PolarityPicker,
+  ResponseCurveStory as ResponseCurve,
+  ResponseCurvePickerStory as ResponseCurvePicker,
+  StatusPickerStory as StatusPicker,
+  ValuePickerStory as ValuePicker,
+}
+
+export default meta

package/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "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",
+
+    /* 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/tsconfig.node.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,45 @@
+import { resolve } from 'node:path'
+import react from '@vitejs/plugin-react-swc'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      include: ['lib'],
+      rollupTypes: true,
+      entryRoot: 'lib',
+      outDir: 'dist/types',
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'lib/main'),
+      name: 'zds-pickers',
+      formats: ['es', 'cjs'],
+      fileName: format => `index.${format}.js`,
+    },
+    sourcemap: false,
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react-select',
+        'd3-drag',
+        'd3-scale',
+        'd3-selection',
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-select': 'ReactSelect',
+        },
+        preserveModules: false,
+      },
+    },
+    minify: true,
+  },
+})

package/dist/index.d.ts

@@ -1,244 +0,0 @@
-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 { }